import { Form, Input, Select, Tooltip } from "antd";
import { CloseCircleFilled } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
import { buildOwnerPhoneTypeOptions } from "../../utils/phoneTypeOptions.js";

export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPhone2OptedOut }) {
  const { t } = useTranslation();
  const { getFieldValue } = form;
  const PHONE_TYPE_OPTIONS = buildOwnerPhoneTypeOptions(t);
  const PREFERRED_CONTACT_OPTIONS = [
    {
      label: t("owners.labels.email", { defaultValue: "Email" }),
      options: [{ label: t("owners.labels.email", { defaultValue: "Email" }), value: "Email" }]
    },
    {
      label: t("owners.labels.phone", { defaultValue: "Phone" }),
      options: PHONE_TYPE_OPTIONS
    }
  ];
  return (
    <div>
      <FormFieldsChanged form={form} />
      <LayoutFormRow header={t("owners.forms.name")}>
        <Form.Item label={t("owners.fields.ownr_title")} name="ownr_title">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_ln")} name="ownr_ln">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_fn")} name="ownr_fn">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_co_nm")} name="ownr_co_nm">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.accountingid")} name="accountingid">
          <Input disabled />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("owners.forms.address")}>
        <Form.Item label={t("owners.fields.ownr_addr1")} name="ownr_addr1">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_addr2")} name="ownr_addr2">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_city")} name="ownr_city">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_st")} name="ownr_st">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_zip")} name="ownr_zip">
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_ctry")} name="ownr_ctry">
          <Input />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("owners.forms.contact")}>
        <Form.Item
          label={t("owners.fields.ownr_ea")}
          name="ownr_ea"
          rules={[
            {
              type: "email",
              message: "This is not a valid email address."
            }
          ]}
        >
          <FormItemEmail email={getFieldValue("ownr_ea")} />
        </Form.Item>

        {/* Phone 1 + Type + Opt-out icon */}
        <Form.Item label={t("owners.fields.ownr_ph1")} style={{ marginBottom: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <Form.Item
              name="ownr_ph1"
              noStyle
              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
            >
              <Input style={{ flex: 1, minWidth: "150px" }} />
            </Form.Item>

            <Form.Item name="ownr_ph1_ty" noStyle>
              <Select allowClear placeholder="Type" options={PHONE_TYPE_OPTIONS} style={{ width: 110 }} />
            </Form.Item>

            {isPhone1OptedOut && (
              <Tooltip title={t("consent.text_body")}>
                <CloseCircleFilled
                  style={{
                    color: "#ff4d4f",
                    fontSize: 16,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    height: "100%"
                  }}
                />
              </Tooltip>
            )}
          </div>
        </Form.Item>

        {/* Phone 2 + Type + Opt-out icon */}
        <Form.Item label={t("owners.fields.ownr_ph2")} style={{ marginBottom: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <Form.Item
              name="ownr_ph2"
              noStyle
              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
            >
              <Input style={{ flex: 1, minWidth: "150px" }} />
            </Form.Item>

            <Form.Item name="ownr_ph2_ty" noStyle>
              <Select allowClear placeholder="Type" options={PHONE_TYPE_OPTIONS} style={{ width: 110 }} />
            </Form.Item>

            {isPhone2OptedOut && (
              <Tooltip title={t("consent.text_body")}>
                <CloseCircleFilled
                  style={{
                    color: "#ff4d4f",
                    fontSize: 16,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    height: "100%"
                  }}
                />
              </Tooltip>
            )}
          </div>
        </Form.Item>

        <Form.Item label={t("owners.fields.preferred_contact")} name="preferred_contact">
          <Select allowClear placeholder="Type" options={PREFERRED_CONTACT_OPTIONS} />
        </Form.Item>

        <Form.Item label={t("owners.fields.tax_number")} name="tax_number">
          <Input />
        </Form.Item>
      </LayoutFormRow>

      <Form.Item label={t("owners.fields.note")} name="note">
        <Input.TextArea rows={4} />
      </Form.Item>
    </div>
  );
}
