import { FlexContainer } from "@/components/shared/components"
import SegmentControlItem, {
  SegmentControlCustomInput,
} from "@/components/shared/components/SegmentControlItem"
import TextWithTooltip from "@/components/shared/components/TextWithTooltip"
import { useThemeContext } from "@/providers/themeProvider"
import { AutomationAgentData } from "../../types"
import { useIsMobile } from "@/hooks/use-is-mobile"

const maxSlippageAllowed = 10

type SlippageSelectorProps = {
  selectedSlippage: AutomationAgentData["selectedSlippage"]
  slippage: string
  onSetSelectedSlippage: (
    value: AutomationAgentData["selectedSlippage"],
  ) => void
  onSetSlippage: (value: string) => void
}

export default function SlippageSelector({
  onSetSelectedSlippage,
  onSetSlippage,
  selectedSlippage,
  slippage,
}: SlippageSelectorProps) {
  const { theme } = useThemeContext()
  const isMobile = useIsMobile()
  const setCustomSlippageHandler = (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const inputValue = event.target.value
    const onlyDecimalNumberPattern = /^(\d+(\.\d{0,2})?)$|^[\b\u007F]$|^$/

    if (onlyDecimalNumberPattern.test(inputValue)) {
      const numericValue = Number(inputValue)
      if (numericValue > maxSlippageAllowed) {
        return onSetSlippage(maxSlippageAllowed.toString())
      } else if (numericValue === maxSlippageAllowed) {
        return onSetSlippage(Math.floor(numericValue).toString())
      }

      onSetSlippage(inputValue)
    }
  }
  const titleType = isMobile ? "TITLE_S" : "TITLE_L"

  return (
    <FlexContainer
      width={100}
      justifyContent={isMobile ? "flex-start" : "space-between"}
      alignItems={isMobile ? "flex-start" : "center"}
      flexDirection={isMobile ? "column" : "row"}
      gap={2}
    >
      <TextWithTooltip
        text="Slippage"
        type={titleType}
        color={theme.colors.gray200}
        tooltipText="Difference between the expected and actual price of a trade."
      />

      <FlexContainer alignItems="center" flex={false} gap={0.8}>
        <FlexContainer
          flex={false}
          gap={0.6}
          bgColor={theme.colors.mainBg}
          borderRadius={0.4}
          padding="0.4rem"
          borderColor={theme.colors.gray700}
          alignItems="center"
        >
          <SegmentControlItem
            selected={selectedSlippage === "AUTO"}
            label={"Auto"}
            value={"AUTO"}
            onClick={() => {
              onSetSelectedSlippage("AUTO")
            }}
          />
          <SegmentControlItem
            selected={selectedSlippage === "CUSTOM"}
            label={"Custom"}
            value={"CUSTOM"}
            onClick={() => {
              onSetSelectedSlippage("CUSTOM")
            }}
          />
        </FlexContainer>

        <SegmentControlCustomInput
          selected={true}
          label="Custom"
          value={slippage}
          onChange={setCustomSlippageHandler}
          onClick={() => onSetSelectedSlippage("CUSTOM")}
          disabled={selectedSlippage === "AUTO"}
          style={{
            cursor: selectedSlippage === "AUTO" ? "not-allowed" : "text",
          }}
        />
      </FlexContainer>
    </FlexContainer>
  )
}