import { useState } from "react";
import { readOnlineFlows } from "../../../controllers/API/flow";
import { FlowType } from "../../../types/flow";
import { useTable } from "../../../util/hook";
import { Button } from "../../bs-ui/button";
import { SearchInput } from "../../bs-ui/input";
import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from "../../bs-ui/sheet";
import CardComponent from "../cardComponent";
import { useTranslation } from "react-i18next";

export default function SkillSheet({ select, children, onSelect }) {
  const [keyword, setKeyword] = useState("");
  const {
    data: onlineFlows,
    loading,
    search,
  } = useTable<FlowType>({}, (param) =>
    readOnlineFlows(param.page, param.keyword).then((res) => {
      return res;
    })
  );

  const handleSearch = (e) => {
    const { value } = e.target;
    setKeyword(value);
    search(value);
  };

  const toCreateFlow = () => {
    window.open("/build/skills");
  };

  const { t } = useTranslation()

  return (
    <Sheet>
      <SheetTrigger asChild>{children}</SheetTrigger>
      <SheetContent className="bg-gray-100 sm:min-w-[966px]">
        <div className="flex h-full" onClick={(e) => e.stopPropagation()}>
          <div className="w-fit p-6">
            <SheetTitle>{t("build.addSkill")}</SheetTitle>
            <SearchInput
              value={keyword}
              placeholder={t("build.search")}
              className="my-6"
              onChange={handleSearch}
            />
            <Button className="w-full" onClick={toCreateFlow}>
              {t("build.createSkill")}
            </Button>
          </div>
          <div className="flex h-full min-w-[696px] flex-1 flex-wrap content-start gap-1.5 overflow-y-auto bg-[#fff] p-5 pt-12 scrollbar-hide">
            {onlineFlows[0] ? (
              onlineFlows.map((flow, i) => (
                <CardComponent
                  key={i}
                  id={i + 1}
                  data={flow}
                  title={flow.name}
                  description={flow.description}
                  type="sheet"
                  footer={
                    <div className="flex justify-end">
                      {select.some((_) => _.id === flow.id) ? (
                        <Button size="sm" className="h-6" disabled>
                          {t("build.added")}
                        </Button>
                      ) : (
                        <Button
                          size="sm"
                          className="h-6"
                          onClick={() => onSelect(flow)}
                        >
                          {t("build.add")}
                        </Button>
                      )}
                    </div>
                  }
                />
              ))
            ) : (
              <div className="flex w-full flex-col items-center justify-center pt-40">
                <p className="mb-3 text-sm text-muted-foreground">
                  {t("build.empty")}
                </p>
                <Button className="w-[200px]" onClick={toCreateFlow}>
                  {t("build.createSkill")}
                </Button>
              </div>
            )}
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}