import React, { useCallback, useRef, useEffect } from "react";
import styled from "styled-components";
import Loading from "../util/Loading";
import { FullScreen } from "../util/Layout";
import Form from "../resumeForm/NormalForm";
import { CenterBtnGrp, SaveBtn, CancelBtn } from "../util/GeneralButton";
import { useLoaded } from "../util/hooks";
import { updateResume } from "../data/updateResume";
import { getResume } from "../data/getResume";
import Nav from "../util/Nav";

const Backgroud = styled(FullScreen)`
  background: rgba(245, 246, 249, 1);
`;

const Background = styled.div`
  width: 100%;
  background: rgba(245, 246, 249, 1);
  min-height: 100vh;
  padding: 20px;
  padding-bottom: 70px;
`;
const Content = styled.div`
  width: 1200px;
  padding: 40px;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  margin: 0 auto;
  margin-bottom: 40px;
`;
const Margin = styled.div`
  height: 80px;
`;

export default ({ history }) => {
  const submit = useCallback((v) => {
    const f = async () => {
      await updateResume(v);
      history.goBack();
    };
    f();
  }, []);
  const ref = useRef(null);
  const onOk = useCallback(() => {
    ref.current.verify((e, v) => {
      if (e) {
        return;
      }
      submit(v);
    });
  }, []);
  const { isLoaded, data } = useLoaded(getResume, []);
  useEffect(() => {
    if (ref.current) {
      ref.current.set(data.education, data.experience);
    }
  }, [data]);

  if (!isLoaded) {
    return (
      <Backgroud>
        <Loading />
      </Backgroud>
    );
  }
  return (
    <Background>
      <Content>
        <Form wrappedComponentRef={ref} {...data}></Form>
      </Content>
      <CenterBtnGrp>
        <CancelBtn
          onClick={() => {
            history.push("/recruitment/resumedetails");
          }}
        />
        <SaveBtn onClick={onOk} />
      </CenterBtnGrp>
      <Margin />
    </Background>
  );
};
