import { Form, Input, Switch } from "antd";
import React from "react";
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 FormItemPhone, {
  PhoneItemFormatterValidation,
} from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

export default function OwnerDetailFormComponent({ form, loading }) {
  const { t } = useTranslation();
  const { getFieldValue } = form;
  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>
      </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.allow_text_message")}
          name="allow_text_message"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <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>
        <Form.Item
          label={t("owners.fields.ownr_ph1")}
          name="ownr_ph1"
          rules={[
            ({ getFieldValue }) =>
              PhoneItemFormatterValidation(getFieldValue, "ownr_ph1"),
          ]}
        >
          <FormItemPhone />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_ph2")}
          name="ownr_ph2"
          rules={[
            ({ getFieldValue }) =>
              PhoneItemFormatterValidation(getFieldValue, "ownr_ph2"),
          ]}
        >
          <FormItemPhone />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.preferred_contact")}
          name="preferred_contact"
        >
          <Input />
        </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>
  );
}
