import React, { useRef, useCallback } from "react";
import styled from "styled-components";
import JobForm from "./JobForm";
import { CenterBtnGrp, SaveBtn, CancelBtn } from "../util/GeneralButton";

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 ({ data, submit, back }) => {
  const formRef = useRef(null);
  const onOk = useCallback(() => {
    formRef.current.validateFieldsAndScroll((e, v) => {
      if (e) {
        return;
      }
      submit(v);
    });
  }, []);
  return (
    <Background>
      <Content>
        <JobForm ref={formRef} {...data}></JobForm>
      </Content>
      <CenterBtnGrp>
        <CancelBtn onClick={back} />
        <SaveBtn onClick={onOk} />
      </CenterBtnGrp>
      <Margin/>
    </Background>
  );
};
