<script context="module" lang="ts">
  type SecretInputFormControlProps = {
    label: string;
    value?: string;
    id: string;
    placeholder?: string;
    required?: boolean;
    maxLength?: string;
    readOnly: boolean;
    copyDoneCallback?: (info: { operation: "COPY" }) => void;
    handleChange: (event: Event) => void;
    classNames?: {
      input?: string;
    };
  } & JSX.InputHTMLAttributes<HTMLInputElement>;
</script>

<script lang="ts">
  import CopyToClipboardButton from "../../ClipboardButton/index.svelte";
  import IconButton from "../../IconButton/index.svelte";
  import defaultStyles from "./index.module.css";
  import Spacer from "../../Spacer/index.svelte";
  import cssClassAssembler from "../../../sso/utils/cssClassAssembler";

  export let handleChange: SecretInputFormControlProps["handleChange"];
  export let classNames: SecretInputFormControlProps["classNames"] = undefined;
  export let id: SecretInputFormControlProps["id"];
  export let label: SecretInputFormControlProps["label"];
  export let value: SecretInputFormControlProps["value"] = undefined;
  export let copyDoneCallback: SecretInputFormControlProps["copyDoneCallback"] =
    undefined;
  export let placeholder: SecretInputFormControlProps["placeholder"] =
    undefined;
  export let required: SecretInputFormControlProps["required"] = undefined;
  export let maxLength: SecretInputFormControlProps["maxLength"] = undefined;
  export let readOnly: SecretInputFormControlProps["readOnly"];

  function toggleIsSecretShown() {
    isSecretShown = !isSecretShown;
  }
  function onChange(event: Event) {
    handleChange(event);
  }
  $: classes = () => {
    return {
      input: cssClassAssembler(classNames?.input, defaultStyles.input),
    };
  };

  let isSecretShown = false;
</script>

<div class={defaultStyles.container}>
  <div class={defaultStyles.toolbar}>
    <label for={id} class={defaultStyles.label}>{label}</label>
    <div>
      <IconButton
        handleClick={toggleIsSecretShown}
        label={isSecretShown ? "Hide secret" : "Show secret"}
        icon={isSecretShown ? "EyeSlashIcon" : "EyeIcon"}
      /><Spacer x={0.5} /><CopyToClipboardButton
        text={value || ""}
        successCallback={copyDoneCallback}
      />
    </div>
  </div>
  <Spacer y={2} /><input
    type={isSecretShown ? "text" : "password"}
    {placeholder}
    value={value || ""}
    {id}
    {required}
    {maxLength}
    {readOnly}
    on:change={(event) => {
      onChange(event);
    }}
    class={classes().input}
  />
</div>