import { Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
import Car from "../job-damage-visual/job-damage-visual.component";
import JobsDetailChangeEstimator from "../jobs-detail-change-estimator/jobs-detail-change-estimator.component";
import JobsDetailChangeFileHandler from "../jobs-detail-change-filehandler/jobs-detail-change-filehandler.component";
import FormRow from "../layout-form-row/layout-form-row.component";

const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
  bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

const lossColFields = { sm: { span: 24 }, md: { span: 18 }, lg: { span: 20 } };
const lossColDamage = { sm: { span: 24 }, md: { span: 6 }, lg: { span: 4 } };

export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
  const { getFieldValue } = form;
  const { t } = useTranslation();

  const handleInsCoChange = (value) => {
    const selectedCompany = bodyshop.md_ins_cos.find((s) => s.name === value);
    if (selectedCompany) {
      form.setFieldValue("ins_addr1", selectedCompany.street1);
      form.setFieldValue("ins_city", selectedCompany.city);
    }
  };

  return (
    <div>
      <FormRow header={t("jobs.forms.claiminfo")}>
        <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
          <Select disabled={jobRO}>
            <Select.Option value="W">{t("jobs.labels.deductible.waived")}</Select.Option>
            <Select.Option value="Y">{t("jobs.labels.deductible.stands")}</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
          <CurrencyInput disabled={jobRO} min={0} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ded_note")} name="ded_note">
          <Select disabled={jobRO}>
            {bodyshop.md_ded_notes.map((n, index) => (
              <Select.Option key={index}>{n}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
          <Input disabled={jobRO} />
        </Form.Item>

        <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
          <Select disabled={jobRO} onChange={handleInsCoChange}>
            {bodyshop.md_ins_cos.map((s) => (
              <Select.Option key={s.name} value={s.name}>
                {s.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item
          label={
            <Space>
              {t("jobs.fields.ins_ct_ln")}
              <JobsDetailChangeFileHandler form={form} disabled={jobRO} />
            </Space>
          }
          name="ins_ct_ln"
        >
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.ins_ph1")}
          name="ins_ph1"
          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ins_ph1")]}
        >
          <FormItemPhone disabled={jobRO} />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.ins_ea")}
          name="ins_ea"
          rules={[
            {
              type: "email",
              message: "This is not a valid email address."
            }
          ]}
        >
          <FormItemEmail email={getFieldValue("ins_ea")} disabled={jobRO} />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.referralsource")}
          name="referral_source"
          rules={[
            {
              required: job.converted && bodyshop.enforce_referral
              ////message: t("general.validation.required"),
            }
          ]}
        >
          <Select disabled={jobRO} allowClear>
            {bodyshop.md_referral_sources.map((s) => (
              <Select.Option key={s} value={s}>
                {s}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.alt_transport")} name="alt_transport">
          <Select disabled={jobRO} allowClear>
            {bodyshop.appt_alt_transport.map((s) => (
              <Select.Option key={s} value={s}>
                {s}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </FormRow>
      <Row gutter={[16, 16]}>
        <Col {...lossColFields}>
          <FormRow header={t("jobs.forms.lossinfo")}>
            <Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
              <Input disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
              <DateTimePicker isDateOnly disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.loss_of_use")} name="loss_of_use">
              <Input disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.kmin")} name="kmin">
              <InputNumber precision={0} min={0} disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.kmout")} name="kmout">
              <InputNumber precision={0} min={0} disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.ponumber")} name="po_number">
              <Input disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.unitnumber")} name="unit_number">
              <Input disabled={jobRO} />
            </Form.Item>
            <Form.Item
              label={t("jobs.fields.specialcoveragepolicy")}
              valuePropName="checked"
              name="special_coverage_policy"
            >
              <Switch disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.tax_registration_number")} name="tax_registration_number">
              <Input disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.driveable")} name="driveable" valuePropName="checked">
              <Switch disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.towin")} name="towin" valuePropName="checked">
              <Switch disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.tlos_ind")} name="tlos_ind" valuePropName="checked">
              <Switch disabled={jobRO} />
            </Form.Item>
          </FormRow>
        </Col>
        <Col {...lossColDamage}>
          {job.area_of_damage ? (
            <Car
              dmg1={job.area_of_damage.impact1 && job.area_of_damage.impact1.padStart(2, "0")}
              dmg2={job.area_of_damage.impact2 && job.area_of_damage.impact2.padStart(2, "0")}
            />
          ) : (
            t("jobs.errors.nodamage")
          )}
        </Col>
      </Row>

      <FormRow header={t("jobs.forms.appraiserinfo")}>
        <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item
          label={
            <Space>
              {t("jobs.fields.est_ct_fn")}
              <JobsDetailChangeEstimator form={form} disabled={jobRO} />
            </Space>
          }
          name="est_ct_fn"
        >
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.est_ea")}
          name="est_ea"
          rules={[
            {
              type: "email",
              message: "This is not a valid email address."
            }
          ]}
        >
          <FormItemEmail email={getFieldValue("est_ea")} disabled={jobRO} />
        </Form.Item>
      </FormRow>
      <FormRow header={t("jobs.forms.other")}>
        <Form.Item label={t("jobs.fields.category")} name="category">
          <Select disabled={jobRO} allowClear>
            {bodyshop.md_categories.map((s) => (
              <Select.Option key={s} value={s}>
                {s}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.servicing_dealer")} name="servicing_dealer">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.selling_dealer_contact")} name="selling_dealer_contact">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.servicing_dealer_contact")} name="servicing_dealer_contact">
          <Input disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.lost_sale_reason")} name="lost_sale_reason">
          <Input disabled={jobRO} allowClear />
        </Form.Item>
      </FormRow>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailGeneral);