import { SafeInput } from "@src/components";
import { NUMBER_INPUT_REGEX } from "@src/config";
import { useSwapContext } from "@src/contexts";
import { useState } from "react";

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

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

  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-md font-medium text-left text-text_primary">
        Slippage
      </h1>
      <div className="flex items-center gap-2 w-full">
        <div className="flex items-center justify-center bg-card_bg p-1 rounded-[8px] gap-2 w-2/3 font-medium text-md">
          {presets.map((preset) => (
            <button
              key={preset}
              type="button"
              onClick={() => onPresetClick(preset)}
              className={`block flex-grow text-center rounded-[8px] text-md py-2 px-1 hover:theme_color/10 hover:opacity-100 ${
                slippage === preset
                  ? "bg-theme_color text-white"
                  : "text-text_primary opacity-60"
              }`}
            >
              {`${preset}%`}
            </button>
          ))}
        </div>

        <div className="w-1/3 flex p-1 rounded-[8px] bg-card_bg h-12">
          <div
            className={`flex w-full items-center justify-center rounded-[8px] ${
              customSlippage ? "bg-theme_color" : "bg-card_bg"
            }`}
          >
            <div
              className={`px-3 w-full flex gap-2 items-center justify-center rounded-[8px] ${
                customSlippage ? "text-white" : "text-text_primary"
              }`}
            >
              <SafeInput
                id="slippage-input"
                placeholder="Custom"
                regex={NUMBER_INPUT_REGEX(6)}
                value={customSlippage}
                onChange={onInputChange}
                className={`text-md leading-none bg-transparent text-center w-full placeholder:text-text_primary/20 focus:outline-none `}
              />
              <div className="text-md font-medium">%</div>
            </div>
          </div>
        </div>
      </div>
      <div className="text-sm text-text_primary opacity-60 text-left">
        <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>The trade might fail due to too low slippage.</p>
      </div>
    </div>
  );
};