import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";
import { useEffect, useMemo, useState } from "react";
import { hireNav } from "./context";
import { differenceBy as _differenceBy } from "lodash";
import { ChevronRightIcon,ChevronLeftIcon } from "@heroicons/react/solid";

import { getJobsByDept } from "@/service/api";
import { useAsyncState } from "@/common/hooks";
import { Job } from "@/service/types";
import { getJobs } from "@/fetch/dataFetch";
import StyledButton from "@/components/StyledButton";
import HoverBox from "@/components/HoverBox";
interface DataGridType extends IProps {
  data: any[];
  doSetSelecteItem: (id: string) => any;
}
interface DtailContainerType extends IProps {
  data: any;
  doCancelSelecteItem: (id: undefined) => any;
}

const DataGrid = (props: DataGridType) => {
  const { data, doSetSelecteItem,className } = props;
  return (
    <div className={`grid grid-cols-2 labtop:grid-cols-3 gap-y-[15px] ${className}`}>
      {data?.map((i, index) => (
        <div onClick={()=>doSetSelecteItem(i.id)} key={index}>
        <HoverBox  className='w-[270px] cursor-pointer flex items-center justify-between px-[20px] py-2'>
          <>
          <div>
            <div className="content-title-cn h-[48px]  w-[100%] line-clamp-1 ">{i.title}</div>
            <div className='normal-text'>{i.diploma}</div>
            <div className='normal-text'>{i.location}</div>
          </div>
          <span className='invisible'>
            <ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
          </span>
          </>
        </HoverBox>
        </div>
      ))}
    </div>
  );
};
const DtailContainer = (props: DtailContainerType) => {
  const { doCancelSelecteItem, data,className } = props;
  return (
    <div className={className+ " -translate-y-[8px]"}>
      <div className={`flex hover:text-theme-blue items-center `}>
      <ChevronLeftIcon className='w-5 h-5'></ChevronLeftIcon>
      <div
        onClick={() => doCancelSelecteItem(undefined)}
        className=" cursor-pointer "
      >
        返回
      </div>
      </div>

      <div className='py-[5px]'>
        <div className='flex justify-between'>
          <div className='sub-title-cn'> {data.title}</div>
          <StyledButton text='我要应聘' color="black"></StyledButton>
         </div>
        <div className='normal-text'>{data.diploma}</div>
        <div className='normal-text'>{data.location}</div>
      </div>
      <div className='py-[5px]'>
        <div className='content-sub-title-cn'>岗位描述</div>
        <div className="flex-col content-1-cn">
          {data.requirments.split("；").map((i: string, index: number) => (
            <div key={index}> - {i}</div>
          ))}
        </div>
      </div>
      <div className='py-[5px]'>
        <div className='content-sub-title-cn'>岗位要求</div>
        <div className="flex-col content-1-cn">
          {data.demands.split("；").map((i: string, index: number) => (
            <div key={index}> - {i}</div>
          ))}
        </div>
      </div>
    </div>
  );
};
const departments = [
  '技术部门',
  '运营部门',
  '人事部门',
  '商务部门',
  '设计部门'
]

export const JoinUs = () => {
  const [data, setData] = useState<any[]>();
  const [selecteData, setSelecteData] = useState<any[]>();
  const [activedDepartment, setActivedDepartment] = useState("技术部门");
  const [selecteItem, setSelecteItem] = useState<string | undefined>();
  useEffect(() => {
    (async () => {
      const res = await getJobs();
      setData(res);
    })();
  }, []);
  useEffect(() => {
    (async () => {
      const res = await getJobs(activedDepartment);
      setSelecteData(res);
    })();
  }, [activedDepartment]);
  const cancelAndSelect =(id:string)=>{
    setSelecteItem(undefined);
    setActivedDepartment(id)
  }
  const selectedItem = useMemo(() => {
    return data?.filter((i) => i.id === selecteItem)[0];
  }, [selecteItem]);
  return (
    <>
      <div className=" pb-5 pl-[165px]">
        <div className="hero-title">Join us</div>
        <div className="sub-title-cn">加入我们</div>
      </div>
      <div className="h-full w-full flex gap-x-16">
        <div className='min-w-[100px]'>
          <div className="flex-col">

          {departments.map((i: string) => (
            <div
              key={i}
              onClick={() => {
                selecteItem ? cancelAndSelect(i): setActivedDepartment(i);
              }}
              className={`item cursor-pointer content-sub2-title-cn my-5 ${
                activedDepartment !== i ? "text-gray-500" : "text-black"
              }`}
            >
              {i}
            </div>
          ))}
               </div>
        </div>

        <div className="flex-col w-full">
          {selecteItem ? (
            <DtailContainer
              className="min-h-[520px] w-7/12 labtop:w-6/12 screen:w-5/12"
              doCancelSelecteItem={setSelecteItem}
              data={selectedItem}
            ></DtailContainer>
          ) : (
            <DataGrid
              className='w-10/12 labtop:w-11/12 screen:w-5/12 -translate-x-[19px]'
              data={selecteData ? selecteData : []}
              doSetSelecteItem={setSelecteItem}
            ></DataGrid>
          )}
        </div>
      </div>
    </>
  );
};
