import { Button, Col, Form, Row, Space, Switch } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import { useTranslation } from "react-i18next";
import ContractCarsContainer from "../../components/contract-cars/contract-cars.container";
import ContractFormComponent from "../../components/contract-form/contract-form.component";
import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container";

export default function ContractCreatePageComponent({ form, selectedJobState, selectedCarState, loading }) {
  const { t } = useTranslation();

  const CreateButton = (
    <Space size="large">
      {selectedJobState[0] && selectedCarState[0] && (
        <Form.Item label={t("jobs.actions.addtoproduction")} name="addtoproduction" valuePropName="checked">
          <Switch />
        </Form.Item>
      )}
      <Button
        disabled={!selectedJobState[0] || !selectedCarState[0]}
        type="primary"
        onClick={() => form.submit()}
        loading={loading}
      >
        {t("general.actions.create")}
      </Button>
    </Space>
  );

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <ContractJobsContainer selectedJobState={selectedJobState} />
        </Col>
        <Col span={24}>
          <ContractCarsContainer selectedCarState={selectedCarState} form={form} />
        </Col>
        <Col span={24}>
          <div
            style={{
              display: selectedJobState[0] && selectedCarState[0] ? "" : "none"
            }}
          >
            <ContractFormComponent
              create
              form={form}
              selectedJobState={selectedJobState}
              selectedCar={selectedCarState[0]}
            />
          </div>
        </Col>
      </Row>
      <PageHeader extra={CreateButton} />
    </div>
  );
}