import { DeleteFilled } from "@ant-design/icons";
import { Button, Col, Form, Input, Row, Select, Tag } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";

export default function InvoiceEnterModalLinesComponent({
  lineData,
  discount,
  form,
  responsibilityCenters
}) {
  const { t } = useTranslation();
  const { setFieldsValue, getFieldsValue } = form;

  const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });

  return (
    <div>
      <Form.List name="invoicelines">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Form.Item required={false} key={field.key}>
                  <div style={{ display: "flex" }}>
                    <Form.Item
                      label={t("invoicelines.fields.line_desc")}
                      key={`${index}joblinename`}
                      name={[field.name, "joblinename"]}
                      rules={[
                        {
                          required: true,
                          message: t("general.validation.required")
                        }
                      ]}
                    >
                      <Select
                        autoFocus
                        name={`le${index}`}
                        style={{ width: "450px" }}
                        onSelect={(value, opt) => {
                          setFieldsValue({
                            invoicelines: getFieldsValue([
                              "invoicelines"
                            ]).invoicelines.map((item, idx) => {
                              if (idx === index) {
                                return {
                                  ...item,
                                  joblineid: opt.key.includes("noline")
                                    ? null
                                    : opt.key,
                                  line_desc: opt.key.includes("noline")
                                    ? ""
                                    : opt.value,
                                  actual_price: opt.cost ? opt.cost : 0,
                                  cost_center: opt.part_type
                                    ? responsibilityCenters.defaults[
                                        opt.part_type
                                      ] || null
                                    : null
                                };
                              }
                              return item;
                            })
                          });
                        }}
                        showSearch
                      >
                        <Select.Option
                          key={`${index}noline`}
                          value={t("invoicelines.labels.other")}
                          cost={0}
                        >
                          {t("invoicelines.labels.other")}
                        </Select.Option>
                        {lineData
                          ? lineData.map(item => (
                              <Select.Option
                                key={item.id}
                                value={item.line_desc}
                                cost={item.act_price ? item.act_price : 0}
                                part_type={item.part_type}
                              >
                                <Row justify="center" align="middle">
                                  <Col span={12}> {item.line_desc}</Col>
                                  <Col span={8}>
                                    <Tag color="blue">{item.oem_partno}</Tag>
                                  </Col>
                                  <Col span={4}>
                                    <Tag color="green">
                                      <CurrencyFormatter>
                                        {item.act_price}
                                      </CurrencyFormatter>
                                    </Tag>
                                  </Col>
                                </Row>
                              </Select.Option>
                            ))
                          : null}
                      </Select>
                    </Form.Item>
                    {getFieldsValue("invoicelines").invoicelines[index] &&
                    getFieldsValue("invoicelines").invoicelines[index]
                      .joblinename &&
                    !getFieldsValue("invoicelines").invoicelines[index]
                      .joblineid ? (
                      <Form.Item
                        label={t("invoicelines.fields.line_desc")}
                        key={`${index}line_desc`}
                        name={[field.name, "line_desc"]}
                      >
                        <Input />
                      </Form.Item>
                    ) : null}

                    <Form.Item
                      label={t("invoicelines.fields.actual")}
                      key={`${index}actual_price`}
                      name={[field.name, "actual_price"]}
                      rules={[
                        {
                          required: true,
                          message: t("general.validation.required")
                        }
                      ]}
                    >
                      <CurrencyInput
                        onBlur={e => {
                          setFieldsValue({
                            invoicelines: getFieldsValue(
                              "invoicelines"
                            ).invoicelines.map((item, idx) => {
                              if (idx === index) {
                                return {
                                  ...item,
                                  actual_cost:
                                    parseFloat(e.target.value) * (1 - discount)
                                };
                              }
                              return item;
                            })
                          });
                        }}
                      />
                    </Form.Item>
                    <Form.Item
                      label={t("invoicelines.fields.actual_cost")}
                      key={`${index}actual_cost`}
                      name={[field.name, "actual_cost"]}
                      rules={[
                        {
                          required: true,
                          message: t("general.validation.required")
                        }
                      ]}
                    >
                      <CurrencyInput
                        onBlur={() =>
                          setAmounts({
                            invoiceTotal: getFieldsValue().total,
                            enteredTotal: getFieldsValue("invoicelines")
                              .invoicelines
                              ? getFieldsValue(
                                  "invoicelines"
                                ).invoicelines.reduce(
                                  (acc, value) =>
                                    acc +
                                    (value && value.actual_cost
                                      ? value.actual_cost
                                      : 0),
                                  0
                                )
                              : 0
                          })
                        }
                      />
                    </Form.Item>
                    <Form.Item
                      label={t("invoicelines.fields.cost_center")}
                      key={`${index}cost_center`}
                      name={[field.name, "cost_center"]}
                      rules={[
                        {
                          required: true,
                          message: t("general.validation.required")
                        }
                      ]}
                    >
                      <Select style={{ width: "150px" }}>
                        {responsibilityCenters.costs.map(item => (
                          <Select.Option key={item}>{item}</Select.Option>
                        ))}
                      </Select>
                    </Form.Item>

                    <DeleteFilled
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  </div>
                </Form.Item>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: "100%" }}
                >
                  {t("invoicelines.actions.newline")}
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>
      <Row>
        <Col span={4}>
          {t("invoicelines.labels.entered")}
          <CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
        </Col>

        <Col span={4}>
          {amounts.invoiceTotal - amounts.enteredTotal === 0 ? (
            <Tag color="green">{t("invoicelines.labels.reconciled")}</Tag>
          ) : (
            <Tag color="red">
              {t("invoicelines.labels.unreconciled")}:
              <CurrencyFormatter>
                {amounts.invoiceTotal - amounts.enteredTotal}
              </CurrencyFormatter>
            </Tag>
          )}
        </Col>
      </Row>
    </div>
  );
}
