import { Flex, FlexBlock, FlexItem, TextControl, Text } from "../wp";
import { closeSmall, plus } from "@wordpress/icons";
import { __, sprintf } from "@wordpress/i18n";
import { useState, type KeyboardEvent } from "react";
import { AdminButton } from "./AdminButton";

interface StringListInputProps {
  addLabel?: string;
  help?: string;
  label: string;
  onChange: (values: string[]) => void;
  placeholder?: string;
  splitPattern?: RegExp;
  values: string[];
}

const normalizeValues = (values: string[]): string[] => {
  const seen = new Set<string>();

  return values
    .map((value) => value.trim())
    .filter(Boolean)
    .filter((value) => {
      const key = value.toLowerCase();

      if (seen.has(key)) {
        return false;
      }

      seen.add(key);
      return true;
    });
};

export const StringListInput = ({
  addLabel = __("Add", "market-sync"),
  help,
  label,
  onChange,
  placeholder,
  splitPattern,
  values,
}: StringListInputProps) => {
  const [inputValue, setInputValue] = useState("");

  const addValues = () => {
    const nextValues = splitPattern ? inputValue.split(splitPattern) : [inputValue];
    const normalized = normalizeValues([...values, ...nextValues]);

    if (normalized.length === values.length && inputValue.trim() === "") {
      return;
    }

    onChange(normalized);
    setInputValue("");
  };

  const removeValue = (valueToRemove: string) => {
    onChange(values.filter((value) => value !== valueToRemove));
  };

  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key !== "Enter") {
      return;
    }

    event.preventDefault();
    addValues();
  };

  return (
    <Flex align="stretch" direction="column" gap={3} justify="flex-start">
      <Flex align="flex-end" gap={2} justify="flex-start">
        <FlexBlock>
          <TextControl
            __next40pxDefaultSize
            label={label}
            onChange={setInputValue}
            onKeyDown={handleKeyDown}
            placeholder={placeholder}
            value={inputValue}
          />
        </FlexBlock>
        <FlexItem>
          <AdminButton
            disabled={inputValue.trim() === ""}
            icon={plus}
            onClick={addValues}
            text={addLabel}
            variant="secondary"
          />
        </FlexItem>
      </Flex>
      {help ? (
        <Text size="12px" variant="muted">
          {help}
        </Text>
      ) : null}

      {values.length > 0 ? (
        <Flex gap={2} justify="flex-start" wrap>
          {values.map((value) => (
            <FlexItem key={value}>
              <Flex
                align="center"
                expanded={false}
                gap={1}
                justify="center"
                style={{
                  backgroundColor: "#f0f0f1",
                  borderRadius: "2px",
                  paddingInlineStart: "10px",
                  paddingInlineEnd: "2px",
                }}
              >
                <FlexItem>
                  <Text lineHeight="1" size="13px">
                    {value}
                  </Text>
                </FlexItem>
                <FlexItem display="flex">
                  <AdminButton
                    icon={closeSmall}
                    label={sprintf(__("Remove %s", "market-sync"), value)}
                    onClick={() => removeValue(value)}
                    size="small"
                    style={{ minWidth: "24px", height: "24px", padding: 0 }}
                    variant="tertiary"
                  />
                </FlexItem>
              </Flex>
            </FlexItem>
          ))}
        </Flex>
      ) : null}
    </Flex>
  );
};