import { Button, Col, PageHeader, Row, Space, Form, Switch } from "antd";

import React from "react";
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>
  );
}