import React, { useRef, useCallback } from "react";
import styled from "styled-components";
import Form from "../resumeForm/NormalForm";
import { CenterBtnGrp, SaveBtn, CancelBtn } from "../util/GeneralButton";
import { sumitResume } from "../data/sumitResume";
import Nav from "../util/Nav";

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 }) => {
  console.log(history[0]);
  const validator = useRef(null);
  const submit = useCallback((v) => {
    const f = async () => {
      await sumitResume(v);
      history.goBack();
    };
    f();
  }, []);
  const onOk = useCallback(() => {
    validator.current.verify((e, v) => {
      if (e) {
        return;
      }
      submit(v);
    });
  }, []);
  return (
    <React.Fragment>
      <Background>
        <Content>
          <Form wrappedComponentRef={validator}></Form>
        </Content>
        <CenterBtnGrp>
          <CancelBtn
            onClick={() => {
              history.push("/recruitment");
            }}
          />
          <SaveBtn onClick={onOk} />
        </CenterBtnGrp>
        <Margin />
      </Background>
    </React.Fragment>
  );
};
