import { useCallback, useState } from "react"
import { useRsi } from "../../hooks/useRsi"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { ChevronLeft } from "lucide-react"

type SelectSheetProps = {
  sheetNames: string[]
  onContinue: (sheetName: string) => Promise<void>
  onBack?: () => void
}

export const SelectSheetStep = ({ sheetNames, onContinue, onBack }: SelectSheetProps) => {
  const [isLoading, setIsLoading] = useState(false)
  const { translations } = useRsi()
  const [value, setValue] = useState(sheetNames[0])

  const handleOnContinue = useCallback(
    async (data: typeof value) => {
      setIsLoading(true)
      await onContinue(data)
      setIsLoading(false)
    },
    [onContinue],
  )

  return (
    <div className="flex h-[calc(100vh-10rem)] flex-col">
      <div className="flex-1 overflow-hidden">
        <div className="px-8 py-6">
          <div className="mb-8">
            <h2 className="text-3xl font-semibold text-foreground">
              {translations.uploadStep.selectSheet.title}
            </h2>
          </div>
          <RadioGroup
            value={value}
            onValueChange={setValue}
            className="space-y-4"
          >
            {sheetNames.map((sheetName) => (
              <div key={sheetName} className="flex items-center space-x-2">
                <RadioGroupItem value={sheetName} id={sheetName} />
                <Label
                  htmlFor={sheetName}
                  className="text-base"
                >
                  {sheetName}
                </Label>
              </div>
            ))}
          </RadioGroup>
        </div>
      </div>
      <div className="flex items-center justify-between border-t px-8 py-4 bg-muted -mb-1">
        {onBack && (
          <Button
            variant="ghost"
            onClick={onBack}
            className="gap-2"
          >
            <ChevronLeft className="h-4 w-4" />
            {translations.uploadStep.selectSheet.backButtonTitle}
          </Button>
        )}
        <div className="flex-1" />
        <Button
          onClick={() => handleOnContinue(value)}
          disabled={isLoading}
        >
          {translations.uploadStep.selectSheet.nextButtonTitle}
        </Button>
      </div>
    </div>
  )
}
