import { AutoComplete, DatePicker, Input, List, Radio } from "antd";
import { HeartFilled } from "@ant-design/icons";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
export default function PartsOrderModalComponent({
  vendorList,
  state,
  sendTypeState,
  orderLinesState
}) {
  const [partsOrder, setPartsOrder] = state;
  const [sendType, setSendType] = sendTypeState;
  const orderLines = orderLinesState[0];
  const [vendorComplete, setVendorComplete] = useState(vendorList);
  const { t } = useTranslation();

  const handleSearch = value => {
    if (value === "") setVendorComplete(vendorList);
    else
      setVendorComplete(
        vendorList.filter(v =>
          v.name.toLowerCase().includes(value.toLowerCase())
        )
      );
  };

  const handleSelect = (value, option) => {
    setPartsOrder({ ...partsOrder, vendorid: option.key });
  };

  return (
    <div>
      <AutoComplete
        onSearch={handleSearch}
        onSelect={handleSelect}
        defaultOpen
        backfill
        optionLabelProp="value"
        dataSource={vendorComplete}
        placeholder={t("vendors.labels.search")}
      >
        {vendorComplete.map(v => (
          <AutoComplete.Option value={v.name} key={v.id}>
            <div>{v.name}</div>
            <div> {v.favorite ? <HeartFilled /> : null}</div>
          </AutoComplete.Option>
        ))}
      </AutoComplete>
      {t("parts_orders.fields.deliver_by")}
      <DatePicker
        defaultValue={partsOrder.deliver_by}
        onChange={e => {
          setPartsOrder({ ...partsOrder, deliver_by: e });
        }}
      />

      {t("parts_orders.labels.inthisorder")}

      <List
        itemLayout="horizontal"
        dataSource={orderLines}
        renderItem={item => (
          <List.Item
            actions={[
              <Input placeholder={t("parts_orders.fields.lineremarks")} />
              //TODO Editable table/adding line remarks to the order.
            ]}
          >
            {
              // <List.Item.Meta
              //   avatar={
              //     <Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' />
              //   }
              //   title={<a href='https://ant.design'>{item.name.last}</a>}
              //   description='Ant Design, a design language for background applications, is refined by Ant UED Team'
              // />
            }
            <div>{`${item.line_desc}${
              item.oem_partno ? " | " + item.oem_partno : ""
            }`}</div>
          </List.Item>
        )}
      />

      <Radio.Group
        defaultValue={sendType}
        onChange={e => setSendType(e.target.value)}
      >
        <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
        <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
      </Radio.Group>
    </div>
  );
}
