<script>import { createId } from "crypto-id";
import Icon from "./Icon.svelte";
export let id = createId(6);
export let label = "";
export let value = "";
export let type = "text";
export let icon = "";
export let grpleft = false;
export let grpright = false;
export let disabled = false;
export let name = void 0;
let className = "";
export { className as class };
$: empty = value === "";
</script>

<div class={'text-field-container ' + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '')}>
  <input
    {id}
    {type}
    {name}
    data-empty={empty}
    on:change
    on:input
    class="{`${icon} ${className}`};"
    class:rounded-md={!grpleft && !grpright}
    class:rounded-r-md={grpright}
    class:rounded-l-md={grpleft}
    on:change={function () {
      value = this.value;
    }}
    on:input={function () {
      value = this.value;
    }}
    {value}
    disabled={disabled ? disabled : undefined}
  />
  <label for={id}>
    {label}
  </label>
  {#if icon}
    <Icon path={icon} class="icon-text" />
  {/if}
</div>

<style>
  .fill-horizontal {
    width: 100%;
  }
  .text-field-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1875rem;
  }
  .text-field-container.disabled {
    opacity: 0.6;
  }
  input {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0rem 0.75rem;
    height: var(--box-height);

    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    outline: none;
    border: var(--border-single-primary);
    border-radius: var(--border-radius-extralarge);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--text-regular);
  }

  input:focus {
    border: var(--border-single-primary);
    border-radius: var(--border-radius-extralarge);
  }

  label {
    position: absolute;
    left: 0.75rem;
    top: 1.125rem;
    margin-left: 1px;
    padding: 0;
    opacity: 0.5;
    background: var(--bg-primary);
    transition: all 0.2s;
    font-size: var(--text-regular);
    border-radius: 3px;
  }

  input:focus + label,
  input[data-empty='false'] + label {
    top: -0.5rem;
    padding: 0 0.25rem;
    opacity: 1;
    color: var(--text-primary);
    font-size: var(--text-tiny);
  }

  .icon-container {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    opacity: 1;
    background-color: var(--bg-primary);
  }

  .icon-text {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    height: 1.5rem;
    width: 1.5rem;
    opacity: 1;
    background-color: var(--bg-primary);
  }
</style>
