import { ButtonFooter, SearchBarHeading, TitleHeading } from "@komi-app/components";
import { SelectOption } from "../../types/select";
import { InverterBlock, InverterLabel, SelectRuleBlock } from "../RuleBlocks";

const DefaultClause: React.FC<{
    inverted: boolean;
    onInvertedChange: (inverted: boolean) => void;
    options: SelectOption[];
    selectedOptions: SelectOption[];
    isLoading: boolean;
    onOptionsChange: (selectedOptions: SelectOption[]) => void;
    attributeName?: string;
  }> = ({
    inverted,
    onInvertedChange,
    options,
    selectedOptions,
    isLoading,
    onOptionsChange,
    attributeName,
  }) => (
    <>
      <InverterBlock
        initialValue={inverted}
        labelType={InverterLabel.Is}
        onValueChange={onInvertedChange}
      />
      <SelectRuleBlock
        className="rule-clause__attribute-value"
        options={options}
        selectedOptions={selectedOptions}
        isMultiselection={true}
        isAnyOption={true}
        loading={isLoading}
        footers={[
          <ButtonFooter
            key="save-footer"
            disabled={selectedOptions.length === 0}
            text="Save"
          />,
        ]}
        headings={[
          <SearchBarHeading key="search-heading" placeholder="" />,
          <TitleHeading key="title-heading" text={attributeName || ""} />,
        ]}
        onOptionSelectionChange={onOptionsChange}
      />
    </>
  );

  export default DefaultClause