import { Button, Col, Form, Input, Row, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import ResetForm from "../form-items-formatted/reset-form-item.component";

export default function OwnerDetailFormComponent({ form }) {
  const { t } = useTranslation();
  const { isFieldsTouched, resetFields, getFieldValue } = form;
  console.log("isFieldsTouched([], true)", isFieldsTouched([], true));
  return (
    <div>
      <button onClick={() => alert(getFieldValue("ownr_ea"))}>YY</button>
      {isFieldsTouched([], true) ? (
        <ResetForm resetFields={resetFields} />
      ) : null}
      <Button type="primary" key="submit" htmlType="submit">
        {t("general.labels.save")}
      </Button>
      <Row>
        <Col span={8}>
          <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.allow_text_message")}
            name="allow_text_message"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
          <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_ctry")} name="ownr_ctry">
            <Input />
          </Form.Item>
        </Col>
        <Col span={8}>
          <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">
            <FormItemPhone customInput={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.preferred_contact")}
            name="preferred_contact"
          >
            <Input />
          </Form.Item>
          <Form.Item label={t("owners.fields.ownr_title")} name="ownr_title">
            <Input />
          </Form.Item>
        </Col>
      </Row>
    </div>
  );
}
