import { useLabContext } from "@/components/labs/context";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useLocaleFunction } from "@/hooks/use-localed";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";

export default function LabFooter() {
  const t = useLocaleFunction();
  const { parsedSections: sections = [], step, onStepChange } = useLabContext();

  return (
    <div className="size-full bg-card p-4 py-2 pl-8 flex items-center justify-between">
      <Button
        className="shrink-0 py-0.5 px-2 pr-3 [&_svg]:size-4 cursor-pointer"
        variant="ghost"
        disabled={!sections[step - 1]?.isVisible}
        onClick={() => onStepChange((step) => step - 1)}
      >
        <ChevronLeftIcon className="stroke-[1.5]" />
        {t("lab.sections.previous")}
      </Button>
      <Select
        value={String(step)}
        onValueChange={(value) => onStepChange(parseInt(value))}
      >
        <SelectTrigger className="w-max border-none shadow-none bg-transparent focus:ring-0 focus-visible:ring-0 cursor-pointer">
          <SelectValue className="text-ellipsis text-nowrap" />
        </SelectTrigger>
        <SelectContent align="center">
          {sections.map((section, index) => (
            <SelectItem
              key={index}
              disabled={!section.isVisible}
              value={String(index)}
            >
              {section.title}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Button
        className="shrink-0 py-0.5 px-2 pl-3 [&_svg]:size-4 cursor-pointer"
        variant="ghost"
        disabled={!sections[step + 1]?.isVisible}
        onClick={() => onStepChange((step) => step + 1)}
      >
        {t("lab.sections.next")}
        <ChevronRightIcon className="stroke-[1.5]" />
      </Button>
    </div>
  );
}