import { Checkbox, Col, Row } from "antd";
import React, { useContext } from "react";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import JobsCreateVehicleInfoNewComponent from "./jobs-create-vehicle-info.new.component";
import JobsCreateVehicleInfoSearchComponent from "./jobs-create-vehicle-info.search.component";
import { useTranslation } from "react-i18next";

const colSpan = {
  sm: { span: 24 },
  lg: { span: 12 }
};

export default function JobsCreateVehicleInfoComponent({ loading, vehicles, form }) {
  const [state, setState] = useContext(JobCreateContext);
  const { t } = useTranslation();
  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Checkbox
            defaultChecked={state.vehicle.new}
            checked={state.vehicle.new}
            onChange={() => {
              setState({
                ...state,
                vehicle: {
                  ...state.vehicle,
                  none: false,
                  new: !state.vehicle.new,
                  selectedid: null
                }
              });
            }}
          >
            {t("jobs.labels.create.newvehicle")}
          </Checkbox>
          <Checkbox
            defaultChecked={state.vehicle.none}
            checked={state.vehicle.none}
            onChange={() => {
              setState({
                ...state,
                vehicle: {
                  ...state.vehicle,
                  new: false,
                  none: !state.vehicle.none,
                  selectedid: null
                }
              });
            }}
          >
            {t("jobs.labels.create.novehicle")}
          </Checkbox>
        </Col>
        <Col {...colSpan}>
          <JobsCreateVehicleInfoSearchComponent loading={loading} vehicles={vehicles} />
        </Col>
        <Col {...colSpan}>
          <JobsCreateVehicleInfoNewComponent form={form} />
        </Col>
      </Row>
    </div>
  );
}