Input

'use client';

import * as React from 'react';
import { Input } from './input';

const EMAIL_HINT = 'We only use this to send receipts.';
const EMAIL_ERROR = 'Enter an email address with an @ sign.';
const TYPE_MS = 70;

function MailIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.67"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M2.5 5.833 9.05 10.42c.53.37.795.556 1.083.627.255.064.522.064.777 0 .288-.071.553-.257 1.083-.627L18.5 5.833M5.5 16.667h9c1.4 0 2.1 0 2.635-.273a2.5 2.5 0 0 0 1.093-1.092c.272-.535.272-1.235.272-2.635V7.333c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.092C16.6 3.333 15.9 3.333 14.5 3.333h-9c-1.4 0-2.1 0-2.635.273a2.5 2.5 0 0 0-1.093 1.092C1.5 5.233 1.5 5.933 1.5 7.333v5.334c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.092c.535.273 1.235.273 2.635.273Z" />
    </svg>
  );
}

function CountrySelect() {
  return (
    <span className="relative flex items-center">
      <select
        aria-label="Country code"
        defaultValue="US"
        className="cursor-pointer appearance-none bg-transparent pe-5 text-tertiary outline-none focus-visible:underline"
      >
        <option value="US">US</option>
        <option value="CA">CA</option>
        <option value="GB">GB</option>
        <option value="ID">ID</option>
      </select>
      <svg
        aria-hidden="true"
        viewBox="0 0 16 16"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="pointer-events-none absolute end-0 size-4 text-fg-tertiary"
      >
        <path d="m4 6 4 4 4-4" />
      </svg>
    </span>
  );
}

const hasAt = (email: string) => email === '' || email.includes('@');

export default function InputDemo({ replay = 0 }: { replay?: number }) {
  const [email, setEmail] = React.useState('');
  const [checked, setChecked] = React.useState(false);
  const invalid = checked && !hasAt(email);

  React.useEffect(() => {
    if (replay === 0) return;
    setEmail('');
    setChecked(false);
    // Types a wrong address, checks it, then fixes it.
    const script = [...'olivia.ganisigit.com'].map((_, i, all) => all.slice(0, i + 1).join(''));
    const fixed = 'olivia@ganisigit.com';
    const timers: number[] = [];
    script.forEach((text, i) => {
      timers.push(window.setTimeout(() => setEmail(text), (i + 1) * TYPE_MS));
    });
    const done = (script.length + 1) * TYPE_MS;
    timers.push(window.setTimeout(() => setChecked(true), done));
    timers.push(window.setTimeout(() => setEmail(fixed), done + 1400));
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <form className="grid w-full max-w-md gap-5" onSubmit={(event) => event.preventDefault()} noValidate>
      <Input
        label="Email"
        type="email"
        required
        autoComplete="email"
        placeholder="olivia@ganisigit.com"
        helpText="Use a work or personal address."
        iconLeading={<MailIcon />}
        value={email}
        onValueChange={(next) => {
          setEmail(next);
          if (hasAt(next)) setChecked(false);
        }}
        onBlur={() => setChecked(true)}
        invalid={invalid}
        hint={invalid ? EMAIL_ERROR : EMAIL_HINT}
      />
      <Input label="Website" type="url" leadingText="https://" placeholder="www.ganisigit.com" />
      <Input label="Phone number" type="tel" leading={<CountrySelect />} placeholder="+1 (555) 000-0000" />
      <Input
        label="Password"
        type="password"
        autoComplete="new-password"
        defaultValue="lunia-motion"
        hint="Use at least 8 characters."
      />
      <Input label="Company" defaultValue="Lunia Labs" disabled />
    </form>
  );
}