import { DatePicker, Form, InputNumber, Input, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";

export default function TimeTicketModalComponent({
  form,
  roAutoCompleteOptions,
  employeeAutoCompleteOptions,
  loadLineTicketData,
  lineTicketData,
  responsibilityCenters,
}) {
  const { t } = useTranslation();

  return (
    <div>
      <div style={{ display: "flex" }}>
        <Form.Item
          name="jobid"
          label={t("timetickets.fields.ro_number")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <JobSearchSelect
            options={roAutoCompleteOptions}
            onBlur={() => {
              if (form.getFieldValue("jobid") !== null) {
                loadLineTicketData({
                  variables: { id: form.getFieldValue("jobid") },
                });
              }
            }}
          />
        </Form.Item>
        <Form.Item
          name="employeeid"
          label={t("timetickets.fields.employee")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <EmployeeSearchSelect options={employeeAutoCompleteOptions} />
        </Form.Item>
      </div>

      <div style={{ display: "flex" }}>
        <Form.Item
          label={t("timetickets.fields.date")}
          name="date"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <DatePicker />
        </Form.Item>
        <Form.Item
          label={t("timetickets.fields.productivehrs")}
          name="productivehrs"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item
          label={t("timetickets.fields.actualhrs")}
          name="actualhrs"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item
          name="cost_center"
          label={t("timetickets.fields.cost_center")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Select
            style={{ width: "150px" }}
            onChange={() => {
              console.log("Changed.");
            }}
          >
            {responsibilityCenters.costs.map((item) => (
              <Select.Option key={item}>{item}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          name="ciecacode"
          label={t("timetickets.fields.ciecacode")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Input disabled />
        </Form.Item>
      </div>
      <LaborAllocationsTable
        joblines={lineTicketData.joblines}
        timetickets={lineTicketData.timetickets}
      />
    </div>
  );
}