import { storiesOf } from "@storybook/react";
import { useState } from "react";
import { Popup } from "../components/Popup";
const stories = storiesOf("AddTransactionPopUp", module);

stories.add("AddTransactionPopUp", () => {
  const [active, setActive] = useState(true);
  const [edit, setEdit] = useState(false);

  const [popUpData, setPopUpData] = useState({
    tx_type: "",
    from: "",
    to: "",
    amount: "",
    tx_status: "",
    tx_hash: "",
  });

  const inputs = [
    {
      title: "Transaction hash",
      name: "tx_hash",
      type: "default",
      placeholder: "hash",
      value: popUpData.tx_hash,
      onChange: (e) =>
        setPopUpData((prev) => ({
          ...prev,
          [e.target.name]: e.target.value,
        })),
    },
    {
      title: "Select Transaction type",
      name: "tx_type",
      type: "lable-input-select",
      options: [
        { name: "Deposit", value: "deposit" },
        { name: "Bonus", value: "bonus" },
        { name: "Withdraw", value: "withdraw" },
        { name: "Transfer", value: "transfer" },
        { name: "Payment", value: "payment" },
        { name: "Internal transfer", value: "internal_transfer" },
      ],
      defaultAny: "Select",
      onChange: (e) =>
        setPopUpData((prev) => ({
          ...prev,
          [e.target.name]: e.target.value,
        })),
    },
    {
      title: "Select Transaction type",
      name: "tx_status",
      type: "lable-input-select",
      options: [
        { name: "Approved", value: "approved" },
        { name: "Pending", value: "pending" },
        { name: "Canceled", value: "canceled" },
      ],
      defaultAny: "Select",
      onChange: (e) =>
        setPopUpData((prev) => ({
          ...prev,
          [e.target.name]: e.target.value,
        })),
    },
    {
      title: "Address from",
      name: "from",
      type: "default",
      placeholder: "address",
      value: popUpData.from,
      onChange: (e) =>
        setPopUpData((prev) => ({
          ...prev,
          [e.target.name]: e.target.value,
        })),
    },
    {
      title: "Address to",
      name: "to",
      type: "default",
      placeholder: "address",
      value: popUpData.to,
      onChange: (e) =>
        setPopUpData((prev) => ({
          ...prev,
          [e.target.name]: e.target.value,
        })),
    },
    {
      title: "Transfer amount",
      name: "amount",
      type: "default",
      rightText: "ATR",
      placeholder: "enter",
      value: popUpData.amount,
      onChange: (e) =>
        setPopUpData((prev) => ({
          ...prev,
          [e.target.name]: e.target.value,
        })),
    },
  ];

  const addTransactionSelects = [
    {
      name: "Tranx Type",
      value: "tx_type",
      infoText: "It must be nice text",
      options: [
        {
          name: "Option1",
          value: "option1",
        },
        {
          name: "Option2",
          value: "option2",
        },
      ],
    },
    {
      name: "Tranx Currency",
      value: "tx_currency",
      options: [
        {
          name: "ETH",
          value: "ETH",
        },
        {
          name: "Option2",
          value: "option2",
        },
      ],
    },
  ];

  const handleAddTransaction = () => {
    console.log("hhiii");
    console.log(popUpData);
  };

  const editTransactionHandler = () => {
    console.log("edit");
    console.log(popUpData);
  };

  return (
    <div>
      {active && (
        <Popup
          type={"transaction"}
          label={`${edit ? "Edit" : "Add"} Transaction`}
          inputs={inputs}
          addTransactionSelects={addTransactionSelects}
          editTransactionHandler={editTransactionHandler}
          handlePopUpClose={() => setActive(false)}
          popUpData={popUpData}
          setPopUpData={setPopUpData}
        />
      )}
    </div>
  );
});
