// type DurationInputProps = {}

import {
  FlexContainer,
  HrLine,
  Typography,
} from "@/components/shared/components"
import ArrowWithDirection from "@/components/shared/components/ArrowWithDirection"
import { useIsMobile } from "@/hooks/use-is-mobile"
import { KeyboardArrowDown } from "@/icons"
import { useThemeContext } from "@/providers/themeProvider"
import { formatHours } from "@/utils"
import { useMemo } from "react"

export type DurationInput = {
  hours: number
  onAddHours: (hour: number) => void
  onRemoveHours: (hour: number) => void
}

export default function DurationInput({
  hours,
  onAddHours,
  onRemoveHours,
}: DurationInput) {
  const { theme } = useThemeContext()
  const isMobile = useIsMobile()

  const titleType = isMobile ? "TITLE_S" : "TITLE_L"
  const formattedTime = useMemo(() => {
    return formatHours(hours)
  }, [hours])
  return (
    <FlexContainer gap={1.6} flexDirection="column">
      <Typography type={titleType} color={theme.colors.gray200}>
        Duration
      </Typography>
      <FlexContainer gap={6}>
        <DurationControl
          title={formattedTime.day || "0"}
          subtitle="Day(s)"
          onDownClick={() => onRemoveHours(Math.min(24, hours))}
          onUpClick={() => onAddHours(24)}
        />
        <DurationControl
          title={formattedTime.hour || "0"}
          subtitle="Hour(s)"
          onDownClick={() => onRemoveHours(Math.min(1, hours))}
          onUpClick={() => onAddHours(1)}
        />
      </FlexContainer>
    </FlexContainer>
  )
}

type DurationControl = {
  title: string
  subtitle: string
  onUpClick: () => void
  onDownClick: () => void
}
function DurationControl({
  onDownClick,
  onUpClick,
  subtitle,
  title,
}: DurationControl) {
  const { theme } = useThemeContext()
  return (
    <FlexContainer justifyContent="space-between" gap={3.2}>
      <FlexContainer
        borderRadius={0.8}
        borderColor={theme.colors.gray600}
        bgColor={theme.colors.gray800}
      >
        <FlexContainer flexDirection="column">
          <FlexContainer
            padding="0.6rem 1.6rem"
            cursor="pointer"
            onClick={onUpClick}
          >
            <ArrowWithDirection
              orientation="right"
              customArrow={
                <KeyboardArrowDown
                  height={16}
                  width={16}
                  color="currentColor"
                />
              }
            />
          </FlexContainer>

          <HrLine color={theme.colors.gray600} />
          <FlexContainer
            padding="0.6rem 1.6rem"
            cursor="pointer"
            onClick={onDownClick}
          >
            <ArrowWithDirection
              orientation="left"
              customArrow={
                <KeyboardArrowDown
                  height={16}
                  width={16}
                  color="currentColor"
                />
              }
            />
          </FlexContainer>
        </FlexContainer>
      </FlexContainer>

      <FlexContainer flexDirection="column" gap={0.4} alignItems="flex-end">
        <Typography type="TITLE_XL" color={theme.colors.gray100}>
          {title}
        </Typography>
        <Typography type="TITLE_XS" color={theme.colors.gray400}>
          {subtitle}
        </Typography>
      </FlexContainer>
    </FlexContainer>
  )
}