/* eslint-disable @typescript-eslint/no-explicit-any */

import React from "react";
import { useForm, router } from "@inertiajs/react";
import { IoClose } from "react-icons/io5";

import styles from "./add-signal.module.scss";

interface Props {
  closeModal: () =>void;
  packages:any;
  type?:"add"|"update";
  signal?:any;
}

const ORDER_TYPES = [
  "Buy",
  "Sell",
  "Buy Stop",
  "Sell Stop",
  "Buy Limit",
  "Sell Limit",
];

const AddTradingSignalModal = ({
  closeModal,
  packages,
  type = "add",
  signal,
}: Props) => {

  interface FormData {
    order_type: string;
    currency_pair: string;
    price: string;
    take_profit_1: string;
    take_profit_2: string;
    stop_loss: string;
    package_ids: number[];
  }

  const {
    data,
    setData,
    post,
    put,
    processing,
    reset,
  } = useForm<FormData>({
    order_type:
      signal?.order_type || "",

    currency_pair:
      signal?.pair || "",

    price:
      signal?.price !== undefined
        ? String(signal.price_formatted)
        : "",

    take_profit_1:
      signal?.take_profit_1 !== undefined
        ? String(signal.take_profit_1_formatted)
        : "",

    take_profit_2:
      signal?.take_profit_2 !== undefined
        ? String(signal.take_profit_2_formatted)
        : "",

    stop_loss:
      signal?.stop_loss !== undefined
        ? String(signal.stop_loss_formatted)
        : "",

    package_ids:
      signal?.packages?.map(
        (pkg:any) => pkg.id
      ) || [],
  });

  const togglePackage = (
    id:number
  ) => {

    const exists =
      data.package_ids.includes(id);

    if (exists) {
      setData(
        "package_ids",
        data.package_ids.filter(
          (item:number)=>item!==id
        )
      );
    } else {
      setData(
        "package_ids",
        [...data.package_ids,id]
      );
    }
  };

  const handleSubmit = (
    e:React.FormEvent
  ) => {

    e.preventDefault();

    if(type==="add"){

      post(
        route("admin.signal-item.store"),
        {
          onSuccess:()=>{
            reset();
            closeModal();

            router.reload({
              only:["flash"],
            });
          },
        }
      );

      return;
    }

    if(
      type==="update" &&
      signal?.id
    ){

      put(
        route(
          "admin.signal-items.update",
          signal.id
        ),
        {
          onSuccess:()=>{
            closeModal();

            router.reload({
              only:["flash"],
            });
          },
        }
      );
    }
  };

  const handleDecimalChange =
    (
      field:keyof typeof data
    ) =>
    (
      e:React.ChangeEvent<HTMLInputElement>
    ) => {

      const value =
        e.target.value;

      if(
        /^\d*\.?\d*$/.test(
          value
        )
      ){
        setData(field,value);
      }
    };

  return (

    <div
      className={
        styles.modal
      }
    >

      <div
        className={
          styles.modal__card
        }
      >

        {/* CLOSE */}

        <button
          type="button"
          onClick={closeModal}
          className={
            styles.modal__close
          }
        >
          <IoClose />
        </button>

        {/* HEADER */}

        <div
          className={
            styles.modal__header
          }
        >

          <span
            className={
              styles.badge
            }
          >
            {type==="add"
              ? "Publish Signal"
              : "Update Signal"}
          </span>

          <h2>
            {type==="add"
              ? "Create Trading Signal"
              : "Update Trading Signal"}
          </h2>

          <p>Publish trading signals for your subscribers. Only users subscribed to the selectedplans will receive access.
          </p>

        </div>

        {/* FORM */}

        <form
          onSubmit={handleSubmit}
          className={
            styles.form
          }
        >

          {/* ORDER */}

          <div
            className={
              styles.formGroup
            }
          >

            <label>
              Order Type
            </label>

            <select
              value={
                data.order_type
              }
              onChange={(e)=>
                setData(
                  "order_type",
                  e.target.value
                )
              }
              required
            >

              <option value="">
                Select order type
              </option>

              {ORDER_TYPES.map(
                (type)=>(
                  <option
                    key={type}
                    value={type.toUpperCase()}
                  >
                    {type}
                  </option>
                )
              )}

            </select>

          </div>

          {/* PAIR */}

          <div
            className={
              styles.formGroup
            }
          >

            <label>
              Currency Pair
            </label>

            <input
              type="text"
              placeholder="e.g EUR/USD"
              value={
                data.currency_pair
              }
              onChange={(e)=>
                setData(
                  "currency_pair",
                  e.target.value
                )
              }
              required
            />

          </div>

          {/* ENTRY */}

          <div
            className={
              styles.formGrid
            }
          >

            <div
              className={
                styles.formGroup
              }
            >

              <label>
                Entry Price
              </label>

              <input
                type="text"
                inputMode="decimal"
                placeholder="1.17420"
                value={
                  data.price
                }
                onChange={
                  handleDecimalChange(
                    "price"
                  )
                }
                required
              />

            </div>

            <div
              className={
                styles.formGroup
              }
            >

              <label>
                Stop Loss
              </label>

              <input
                type="text"
                inputMode="decimal"
                placeholder="1.17100"
                value={
                  data.stop_loss
                }
                onChange={
                  handleDecimalChange(
                    "stop_loss"
                  )
                }
                required
              />

            </div>

          </div>

          {/* TAKE PROFITS */}

          <div
            className={
              styles.formGrid
            }
          >

            <div
              className={
                styles.formGroup
              }
            >

              <label>
                Take Profit 1
              </label>

              <input
                type="text"
                inputMode="decimal"
                placeholder="1.18000"
                value={
                  data.take_profit_1
                }
                onChange={
                  handleDecimalChange(
                    "take_profit_1"
                  )
                }
                required
              />

            </div>

            <div
              className={
                styles.formGroup
              }
            >

              <label>
                Take Profit 2
              </label>

              <input
                type="text"
                inputMode="decimal"
                placeholder="1.18400"
                value={
                  data.take_profit_2
                }
                onChange={
                  handleDecimalChange(
                    "take_profit_2"
                  )
                }
              />

            </div>

          </div>

          {/* PACKAGES */}

          <div
            className={
              styles.formGroup
            }
          >

            <label>
              Accessible Signal Plans
            </label>

            <p
              className={
                styles.helper
              }
            >
              Choose the plans that
              should have access to
              this trading signal.
            </p>

            <div
              className={
                styles.packages
              }
            >

              {packages?.data?.map(
                (pkg:any)=>{

                  const active =
                    data.package_ids.includes(
                      pkg.id
                    );

                  return(

                    <button
                      key={pkg.id}
                      type="button"
                      onClick={()=>
                        togglePackage(
                          pkg.id
                        )
                      }
                      className={
                        active
                          ? styles.packageActive
                          : styles.package
                      }
                    >

                      <span>
                        {pkg.name}
                      </span>

                    </button>

                  );

                }
              )}

            </div>

          </div>

          {data.package_ids.map(
            (id)=>(
              <input
                key={id}
                type="hidden"
                name="package_ids[]"
                value={id}
              />
            )
          )}

          {/* FOOTER */}

          <div
            className={
              styles.actions
            }
          >

            {/* <button
              type="button"
              onClick={closeModal}
              className={
                styles.cancelBtn
              }
            >
              Cancel
            </button> */}

            <button
              type="submit"
              disabled={
                processing
              }
              className={
                styles.submitBtn
              }
            >

              {processing
                ? (
                  type==="add"
                    ? "Publishing..."
                    : "Updating..."
                )
                : (
                  type==="add"
                    ? "Publish Signal"
                    : "Update Signal"
                )}

            </button>

          </div>

        </form>

      </div>

    </div>

  );

};

export default AddTradingSignalModal;