<script context="module" lang="ts">
  type ItemRowProps = {
    inputType: "text" | "url" | "number" | "password";
    item: string;
    index: number;
    handleItemUpdate: (newItem: string, index: number) => void;
    handleItemDelete: (index: number) => void;
    handleBlur: (index: number) => void;
    isDuplicateItem?: boolean;
    disableDelete?: boolean;
    disabled?: boolean;
    classNames: {
      input: string;
    };
  };
</script>

<script lang="ts">
  import XMarkIcon from "../../icons/XMarkIcon.svelte";
  import styles from "../index.module.css";
  import itemStyles from "./index.module.css";

  export let inputType: ItemRowProps["inputType"];
  export let classNames: ItemRowProps["classNames"];
  export let item: ItemRowProps["item"];
  export let handleItemUpdate: ItemRowProps["handleItemUpdate"];
  export let index: ItemRowProps["index"];
  export let handleBlur: ItemRowProps["handleBlur"];
  export let disabled: ItemRowProps["disabled"] = undefined;
  export let handleItemDelete: ItemRowProps["handleItemDelete"];
  export let disableDelete: ItemRowProps["disableDelete"] = undefined;
</script>

<div class={itemStyles.row}>
  <input
    name="item"
    type={inputType || "text"}
    class={`${classNames.input} ${styles["input-sm"]} ${itemStyles["input"]}`}
    value={item}
    on:change={(event) => {
      handleItemUpdate(event.target.value, index);
    }}
    on:blur={(event) => {
      handleBlur(index);
    }}
    required={true}
    {disabled}
  /><button
    type="button"
    on:click={(event) => {
      handleItemDelete(index);
    }}
    disabled={disableDelete}
    ><XMarkIcon
      svgAttrs={{
        class: itemStyles["svg"],
      }}
    /></button
  >
</div>