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

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

export default function JobsCreateOwnerInfoComponent({ loading, owners }) {
  const { t } = useTranslation();
  const [state, setState] = useContext(JobCreateContext);

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Checkbox
            defaultChecked={state.owner.new}
            checked={state.owner.new}
            onChange={() => {
              setState({
                ...state,
                owner: {
                  ...state.owner,
                  new: !state.owner.new,
                  selectedid: null
                }
              });
            }}
          >
            {t("jobs.labels.create.newowner")}
          </Checkbox>
        </Col>

        <Col {...colSpan}>
          <JobsCreateOwnerInfoSearchComponent loading={loading} owners={owners} />
        </Col>

        <Col {...colSpan}>
          <JobsCreateOwnerInfoNewComponent />
        </Col>
      </Row>
    </div>
  );
}