import { SafeInput } from "@src/components";
import { NUMBER_INPUT_REGEX } from "@src/constants";
import { useSwapContext } from "@src/context";
import { useState } from "react";

export const Slippage = () => {
  const { slippage, setSlippage } = useSwapContext();
  const [customSlippage, setCustomSlippage] = useState("");

  const defaultPreset = "1.5";
  const presets = ["0.5", "1.5", "3.0"];

  const onPresetClick = (preset: string) => {
    setCustomSlippage("");
    setSlippage(preset);
  };

  const onInputChange = (value: string) => {
    if (value.length === 0) {
      setCustomSlippage("");
      setSlippage(defaultPreset);
    } else {
      if (value.length >= 5) {
        value = value.substring(0, 5);
      }
      if (Number(value) <= 100) {
        setCustomSlippage(value);
        setSlippage(value);
      }
    }
  };

  return (
    <div className="flex flex-col gap-5">
      <h1 className="text-sm font-medium text-left">Slippage</h1>
      <div className="flex items-center gap-2 w-full">
        <div className="flex items-center justify-center bg-t_bg_tertiary bg-opacity-5 p-1 rounded-md gap-2 w-2/3">
          {presets.map((preset) => (
            <button
              key={preset}
              type="button"
              onClick={() => onPresetClick(preset)}
              className={`block flex-grow text-center rounded-md text-md py-2 px-1 hover:t_theme_color/10 hover:opacity-100 ${
                slippage === preset
                  ? "bg-t_theme_color text-white"
                  : "text-t_text_primary opacity-20"
              }`}
            >
              {`${preset}%`}
            </button>
          ))}
        </div>

        <div
          className={`w-1/3 flex items-center justify-center rounded-md ${
            customSlippage
              ? "bg-t_theme_color h-12"
              : "bg-t_bg_tertiary bg-opacity-5 h-12"
          }`}
        >
          <div
            className={`p-1 w-full flex items-center justify-center rounded-md ${
              customSlippage ? "text-white" : "text-t_text_primary"
            }`}
          >
            <SafeInput
              id="slippage-input"
              placeholder="1.5"
              regex={NUMBER_INPUT_REGEX}
              value={customSlippage}
              onChange={onInputChange}
              className={`text-md leading-none bg-transparent text-center w-full placeholder:text-t_text_primary/20 focus:outline-none `}
            />
            %
          </div>
        </div>
      </div>
      <div className="text-sm opacity-60">
        <p>
          Slippage is the price variation you are willing to accept in the event
          that the price of the trade changes while it is processing.
        </p>
        <br />
        <p>
          If the trade fails due to slippage, you will receive native tokens
          instead.
        </p>
      </div>
    </div>
  );
};