import { WarningFilled } from "@ant-design/icons";
import { useApolloClient } from "@apollo/client";
import { Button, Form, Input, InputNumber, PageHeader, Space } from "antd";
import moment from "moment";
import React from "react";
import { useTranslation } from "react-i18next";
import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
import { DateFormatter } from "../../utils/DateFormatter";
import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
import CourtesyCarReadiness from "../courtesy-car-readiness-select/courtesy-car-readiness-select.component";
import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

export default function CourtesyCarCreateFormComponent({
  form,
  saveLoading,
  newCC,
}) {
  const { t } = useTranslation();
  const client = useApolloClient();

  return (
    <div>
      <PageHeader
        title={t("menus.header.courtesycars")}
        extra={
          <Button
            type="primary"
            loading={saveLoading}
            onClick={() => form.submit()}
          >
            {t("general.actions.save")}
          </Button>
        }
      />

      {newCC ? null : <FormFieldsChanged form={form} />}
      <LayoutFormRow header={t("courtesycars.labels.vehicle")}>
        <Form.Item
          label={t("courtesycars.fields.year")}
          name="year"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.make")}
          name="make"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.model")}
          name="model"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.plate")}
          name="plate"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.color")}
          name="color"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.vin")}
          name="vin"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow header={t("courtesycars.labels.usage")}>
        <Form.Item
          label={t("courtesycars.fields.mileage")}
          name="mileage"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumber min={0} precision={0} />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.fleetnumber")}
          name="fleetnumber"
          validateTrigger="onBlur"
          hasFeedback
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
            ({ getFieldValue }) => ({
              async validator(rule, value) {
                if (value) {
                  const response = await client.query({
                    query: CHECK_CC_FLEET_NUMBER,
                    variables: {
                      name: value,
                    },
                  });

                  if (
                    response.data.courtesycars_aggregate.aggregate.count === 0
                  ) {
                    return Promise.resolve();
                  } else if (
                    response.data.courtesycars_aggregate.nodes.length === 1 &&
                    response.data.courtesycars_aggregate.nodes[0].id ===
                      form.getFieldValue("id")
                  ) {
                    return Promise.resolve();
                  }
                  return Promise.reject(t("courtesycars.labels.uniquefleet"));
                } else {
                  return Promise.resolve();
                }
              },
            }),
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.purchasedate")}
          name="purchasedate"
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.servicestartdate")}
          name="servicestartdate"
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.serviceenddate")}
          name="serviceenddate"
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.leaseenddate")}
          name="leaseenddate"
        >
          <FormDatePicker />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("courtesycars.labels.status")}>
        <Form.Item
          span={24}
          label={t("courtesycars.fields.fuel")}
          name="fuel"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <CourtesyCarFuelSlider />
        </Form.Item>
        <Form.Item
          label={t("courtesycars.fields.status")}
          name="status"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <CourtesyCarStatus />
        </Form.Item>
        <Form.Item label={t("courtesycars.fields.readiness")} name="readiness">
          <CourtesyCarReadiness />
        </Form.Item>
        <div>
          <Form.Item
            label={t("courtesycars.fields.nextservicekm")}
            name="nextservicekm"
          >
            <InputNumber min={0} precision={0} />
          </Form.Item>
          <Form.Item
            shouldUpdate={(p, c) =>
              p.mileage !== c.mileage || p.nextservicekm !== c.nextservicekm
            }
          >
            {() => {
              const nextservicekm = form.getFieldValue("nextservicekm");
              const mileageOver = nextservicekm
                ? nextservicekm <= form.getFieldValue("mileage")
                : false;
              if (mileageOver)
                return (
                  <Space direction="vertical" style={{ color: "tomato" }}>
                    <span>
                      <WarningFilled style={{ marginRight: ".3rem" }} />
                      {t("contracts.labels.cardueforservice")}
                    </span>
                    <span>{`${nextservicekm} km`}</span>
                  </Space>
                );

              return <></>;
            }}
          </Form.Item>
        </div>
        <div>
          <Form.Item
            label={t("courtesycars.fields.nextservicedate")}
            name="nextservicedate"
          >
            <FormDatePicker />
          </Form.Item>
          <Form.Item
            shouldUpdate={(p, c) => p.nextservicedate !== c.nextservicedate}
          >
            {() => {
              const nextservicedate = form.getFieldValue("nextservicedate");
              const dueForService =
                nextservicedate &&
                moment(nextservicedate).endOf("day").isSameOrBefore(moment());

              if (dueForService)
                return (
                  <Space direction="vertical" style={{ color: "tomato" }}>
                    <span>
                      <WarningFilled style={{ marginRight: ".3rem" }} />
                      {t("contracts.labels.cardueforservice")}
                    </span>
                    <span>
                      <DateFormatter>{nextservicedate}</DateFormatter>
                    </span>
                  </Space>
                );

              return <></>;
            }}
          </Form.Item>
        </div>
        <Form.Item label={t("courtesycars.fields.damage")} name="damage">
          <Input.TextArea />
        </Form.Item>
        <Form.Item label={t("courtesycars.fields.notes")} name="notes">
          <Input.TextArea />
        </Form.Item>
        <div>
          <Form.Item
            label={t("courtesycars.fields.registrationexpires")}
            name="registrationexpires"
          >
            <FormDatePicker />
          </Form.Item>
          <Form.Item
            shouldUpdate={(p, c) =>
              p.registrationexpires !== c.registrationexpires
            }
          >
            {() => {
              const expires = form.getFieldValue("registrationexpires");

              const dateover =
                expires && moment(expires).endOf("day").isBefore(moment());

              if (dateover)
                return (
                  <Space direction="vertical" style={{ color: "tomato" }}>
                    <span>
                      <WarningFilled style={{ marginRight: ".3rem" }} />
                      {t("contracts.labels.dateinpast")}
                    </span>
                  </Space>
                );

              return <></>;
            }}
          </Form.Item>
        </div>
        <div>
          <Form.Item
            label={t("courtesycars.fields.insuranceexpires")}
            name="insuranceexpires"
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <FormDatePicker />
          </Form.Item>
          <Form.Item
            shouldUpdate={(p, c) => p.insuranceexpires !== c.insuranceexpires}
          >
            {() => {
              const expires = form.getFieldValue("insuranceexpires");

              const dateover =
                expires && moment(expires).endOf("day").isBefore(moment());

              if (dateover)
                return (
                  <Space direction="vertical" style={{ color: "tomato" }}>
                    <span>
                      <WarningFilled style={{ marginRight: ".3rem" }} />
                      {t("contracts.labels.dateinpast")}
                    </span>
                  </Space>
                );

              return <></>;
            }}
          </Form.Item>
        </div>
        <Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
          <CurrencyInput />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}