import React, { useCallback } from "react";
import styled from "styled-components";
import Header from "../jobDetail/Header";
import JobInfo from "../jobDetail/JobInfo";
import Address from "../jobDetail/Address";
import Comp from "../jobDetail/Comp";
import Loading from "../util/Loading";
import Nav from "../util/Nav";
import { FullScreen } from "../util/Layout";
import { applyProfile } from "../data/submitData";
import { getJobInfo } from "../data/getJobInfo";
import { ifHaveResume } from "../data/ifHaveResume";
import { notification } from "antd";
import { useLoaded, useToggle } from "../util/hooks";
import ConfirmModal from "../jobDetail/ConfirmModal";
import { Link } from "react-router-dom";

const BuleBgHeader = styled.div`
  width: 100%;
  background: rgba(245, 250, 255, 1);
`;
const Content = styled.div`
  width: 1200px;
  margin: 0 auto;
`;
const WBg = styled.div`
  width: 100%;
  background: white;
  min-height: 1000px;
`;

export default ({
  jobId,
  checkIfLogin,
  history,
  showLoginDialog,
  showProfileCompleteDialog,
  user,
}) => {
  const { isLoaded, data } = useLoaded(getJobInfo, [jobId]);
  const [vis, setVis] = useToggle();
  const apply = useCallback(() => {
    if (checkIfLogin() === false) {
      showLoginDialog();
      return;
    } else {
      const f = async () => {
        if (user && !user.profile_completed) {
          showProfileCompleteDialog();
        } else if (await ifHaveResume()) {
          const resp = await applyProfile(jobId);
          if (resp.status === 0) {
            notification.open({
              message: "成功",
              description: "投递简历成功",
            });
          } else {
            notification.open({
              message: "失败",
              description: resp.message,
            });
          }
        } else {
          setVis();
        }
      };
      f();
    }
  }, []);
  const back = useCallback(() => {
    history.push('/recruitment');
  }, []);
  if (!isLoaded) {
    return (
      <FullScreen>
        <Loading />
      </FullScreen>
    );
  }
  return (
    <WBg>
      <BuleBgHeader>
        <Nav
          breadcrunmb={[<Link to="/recruitment">职位</Link>, "职位详情"]}
          back={back}
        />
        <Content>
          <Header data={data} apply={apply}></Header>
        </Content>
      </BuleBgHeader>
      <Content>
        <JobInfo {...data} />
        <Comp {...data} />
        <Address {...data} />
      </Content>
      <ConfirmModal
        visible={vis}
        onCancel={() => {
          setVis();
          history.push("/recruitment");
        }}
        history={history}
        jobId={jobId}
      />
    </WBg>
  );
};
