import { Button, Checkbox, Col, Form, Input, InputNumber, Row } from "antd";
import React from "react";
import { MinusCircleOutlined, PlusCircleFilled } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import ResetForm from "../form-items-formatted/reset-form-item.component";
let id = 0;

export default function VendorsFormComponent({ form, vendor, handleDelete }) {
  const {
    getFieldDecorator,
    isFieldsTouched,
    getFieldValue,
    resetFields
  } = form;

  getFieldDecorator("keys", {
    initialValue: Array.isArray(vendor.favorite) ? vendor.favorite : []
  });

  const remove = k => {
    // can use data-binding to get
    const keys = form.getFieldValue("keys");
    console.log("keys", keys);
    // We need at least one passenger
    if (keys.length === 1) {
      return;
    }
    // can use data-binding to set
    form.setFieldsValue({
      keys: keys.filter(key => key !== k)
    });
  };

  const add = props => {
    console.log("props", props);
    // can use data-binding to get
    const keys = form.getFieldValue("keys");
    console.log("keys", keys);
    const nextKeys = keys.concat(id++);
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys
    });
  };

  const { t } = useTranslation();
  return (
    <div>
      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
      <Button htmlType="submit" type="primary">
        {t("general.actions.save")}
      </Button>
      <Button type="danger" onClick={handleDelete}>
        {t("general.actions.delete")}
      </Button>

      {getFieldValue("keys").map((k, index) => (
        <Form.Item required={false} key={k}>
          {getFieldDecorator(`favorite[${k}].make`, {
            validateTrigger: ["onChange", "onBlur"]
          })(
            <Input
              placeholder="passenger name"
              style={{ width: "60%", marginRight: 8 }}
            />
          )}
          {getFieldValue("keys").length > 1 ? (
            <MinusCircleOutlined
              className="dynamic-delete-button"
              onClick={() => remove(k)}
            />
          ) : null}
          <Form.Item label="Group">
            {getFieldDecorator(`favorite[${k}].type`, {
              initialValue: null
            })(
              <Checkbox.Group style={{ width: "100%" }}>
                <Row>
                  <Col span={8}>
                    <Checkbox value="OEM">OEM</Checkbox>
                  </Col>
                  <Col span={8}>
                    <Checkbox value="LKQ">LKQ</Checkbox>
                  </Col>
                  <Col span={8}>
                    <Checkbox value="AM">AM</Checkbox>
                  </Col>
                </Row>
              </Checkbox.Group>
            )}
          </Form.Item>
        </Form.Item>
      ))}
      <Form.Item label={t("vendors.fields.favorite")}>
        <Button type="dashed" onClick={add} style={{ width: "60%" }}>
          <PlusCircleFilled /> Add field
        </Button>
      </Form.Item>

      <Form.Item label={t("vendors.fields.zip")}>
        {getFieldDecorator("zip", {
          initialValue: vendor.zip
        })(<Input name="zip" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.terms")}>
        {getFieldDecorator("terms", {
          initialValue: vendor.terms
        })(<Input name="terms" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.taxid")}>
        {getFieldDecorator("taxid", {
          initialValue: vendor.taxid
        })(<Input name="taxid" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.street1")}>
        {getFieldDecorator("street1", {
          initialValue: vendor.street1
        })(<Input name="street1" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.street2")}>
        {getFieldDecorator("street2", {
          initialValue: vendor.street2
        })(<Input name="street2" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.state")}>
        {getFieldDecorator("state", {
          initialValue: vendor.state
        })(<Input name="state" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.prompt_discount")}>
        {getFieldDecorator("prompt_discount", {
          initialValue: vendor.prompt_discount
        })(<InputNumber name="prompt_discount" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.name")}>
        {getFieldDecorator("name", {
          initialValue: vendor.name
        })(<Input name="name" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.email")}>
        {getFieldDecorator("email", {
          initialValue: vendor.email,
          rules: [
            {
              type: "email",
              message: t("general.validation.invalidemail")
            }
          ]
        })(<FormItemEmail name="email" email={getFieldValue("email")} />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.due_date")}>
        {getFieldDecorator("due_date", {
          initialValue: vendor.due_date
        })(<InputNumber name="due_date" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.display_name")}>
        {getFieldDecorator("display_name", {
          initialValue: vendor.display_name
        })(<Input name="display_name" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.discount")}>
        {getFieldDecorator("discount", {
          initialValue: vendor.discount
        })(<InputNumber name="discount" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.country")}>
        {getFieldDecorator("country", {
          initialValue: vendor.country
        })(<Input name="country" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.cost_center")}>
        {getFieldDecorator("cost_center", {
          initialValue: vendor.cost_center,
          rules: [{ required: true, message: t("general.validation.required") }]
        })(<Input name="cost_center" />)}
      </Form.Item>
      <Form.Item label={t("vendors.fields.city")}>
        {getFieldDecorator("city", {
          initialValue: vendor.city
        })(<Input name="city" />)}
      </Form.Item>
    </div>
  );
}
