import { Link, useParams } from "react-router-dom";
import React, { useEffect, useState } from "react";
import store from "data/store"
import { useCookies } from 'react-cookie';
import option from "data/option.js";
import axios from "axios";

export default function Coach({ max }) {
  var data = []
  const [cookies, setCookie] = useCookies();
  const [id, setId] = useState([]);
  const [chName, setChName] = useState([]);
  const { company } = useParams();
  const [photolife, setPhotolife] = useState([]);

  const prepareCoaches = () => {
    let coaches = []
    for (let count = 0; count < chName.length; count++) {
      coaches.push(
        <Link
          to={`/${company}/mobile/team/teamdetail/${id[count]}`}>
          <div className="flex items-center p-3" style={{ borderBottom: "1px solid #eeeff4" }}>
            <div className="mr-3" style={{ width: "80px", height: "80px" ,overflow: "hidden" }}>
              <img className="coach mr-4 mx-auto" src={photolife[count]} style={{ height: "80px" }} st alt="" />
            </div>
            <div className="w-4/12" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }}>
              <p className="m-0">{chName[count]}</p>
            </div>
            <div
              className="check ml-auto text-master hover:no-underline hover:text-black"
            >
              查看
            </div>
          </div>
        </Link>
      )
    }
    return coaches;
  }

  useEffect(() => {
    const headers = {
      'Authorization': 'Bearer ' + cookies[company + "-token"]
    };
    axios.get(store.webApiUrl + 'UserCoach/GetByCompanyUrl/' + company, { headers })
      .then(r => {
        if (r.status == "200") {
          data = r.data.data.filter(coach => coach.active == 1);
          for (let count = 0; count < (max || data.length); count++) {
            if (data[count]) {
              setId(original => [...original, data[count].id]);
              setChName(original => [...original, data[count].member.user.chName]);
              setPhotolife(original => [...original, "data:image;base64," + data[count].photolife]);
            }
          }
        }
      });
  }, []);

  return (
    <>
      {prepareCoaches()}
    </>
  );
}
