import React from "react";
import {
  HorzPosition,
  MultiSelect,
  SearchBarHeading,
} from "@komi-app/components";
import { useQuery } from "@tanstack/react-query";
import { googleApi } from "services";

import "./FontSelector.scss";

interface FontSelectorProps {
  value?: string;
  onChange?: (font: string) => any;
}

const FontSelector = ({ value: font, onChange }: FontSelectorProps) => {
  const selectedValues = font ? [font] : ["Roboto"];

  const { data: fonts } = useQuery({
    queryKey: ["google-font"],
    async queryFn() {
      const fonts = await googleApi.getFonts();

      return fonts.map((x) => x.name);
    },
    initialData: selectedValues,
  });

  return (
    <MultiSelect
      isMultiselection={false}
      selectedValues={selectedValues}
      options={fonts.map((font) => ({
        label: font,
        value: font,
      }))}
      onOptionValueSelectionChange={([value]) => onChange?.(value)}
      optionsClassName="font-selector-options"
      wrapperClassName="font-selector-wrapper"
      horzPosition={HorzPosition.Right}
    >
      <MultiSelect.Heading>
        <SearchBarHeading />
      </MultiSelect.Heading>
    </MultiSelect>
  );
};

export default FontSelector;
