import { Form, Input, Switch } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
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 JobsCreateOwnerInfoNewComponent() {
  const [state] = useContext(JobCreateContext);

  const { t } = useTranslation();
  return (
    <div>
      <LayoutFormRow header={t("owners.forms.name")} grow>
        <Form.Item
          label={t("owners.fields.ownr_ln")}
          name={["owner", "data", "ownr_ln"]}
          rules={[
            {
              required: state.owner.new,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_fn")}
          name={["owner", "data", "ownr_fn"]}
          rules={[
            {
              required: state.owner.new,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item
          label={t("owners.fields.ownr_title")}
          name={["owner", "data", "ownr_title"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_co_nm")}
          name={["owner", "data", "ownr_co_nm"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("owners.forms.address")} grow>
        <Form.Item
          label={t("owners.fields.ownr_addr1")}
          name={["owner", "data", "ownr_addr1"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_addr2")}
          name={["owner", "data", "ownr_addr2"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item
          label={t("owners.fields.ownr_city")}
          name={["owner", "data", "ownr_city"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_st")}
          name={["owner", "data", "ownr_st"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow>
        <Form.Item
          label={t("owners.fields.ownr_zip")}
          name={["owner", "data", "ownr_zip"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_ctry")}
          name={["owner", "data", "ownr_ctry"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("owners.forms.contact")} grow>
        <Form.Item
          label={t("owners.fields.ownr_ea")}
          rules={[
            {
              type: "email",
              message: "This is not a valid email address.",
            },
          ]}
          name={["owner", "data", "ownr_ea"]}
        >
          <FormItemEmail
            //email={form.getFieldValue("ownr_ea")}
            disabled={!state.owner.new}
          />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_ph1")}
          name={["owner", "data", "ownr_ph1"]}
          rules={[
            ({ getFieldValue }) =>
              PhoneItemFormatterValidation(
                getFieldValue,
                "owner.data.ownr_ph1"
              ),
          ]}
        >
          <FormItemPhone disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow>
        <Form.Item
          label={t("owners.fields.preferred_contact")}
          name={["owner", "data", "preferred_contact"]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.allow_text_message")}
          valuePropName="checked"
          name={["owner", "data", "allow_text_message"]}
        >
          <Switch disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}