import { createSignal } from "solid-js";
import { generatePassword } from "../../shared/generate";

interface GeneratorProps {
  onSelect?: (password: string) => void;
  onClose?: () => void;
}

export function Generator(props: GeneratorProps) {
  const [password, setPassword] = createSignal(generatePassword({ length: 20 }));
  const [length, setLength] = createSignal(20);
  const [upper, setUpper] = createSignal(true);
  const [lower, setLower] = createSignal(true);
  const [numbers, setNumbers] = createSignal(true);
  const [symbols, setSymbols] = createSignal(true);

  function regenerate() {
    setPassword(
      generatePassword({
        length: length(),
        includeUppercase: upper(),
        includeLowercase: lower(),
        includeNumbers: numbers(),
        includeSymbols: symbols(),
      })
    );
  }

  function handleUse() {
    if (props.onSelect) {
      props.onSelect(password());
    }
    if (props.onClose) {
      props.onClose();
    }
  }

  return (
    <div>
      <div class="generator-preview">{password()}</div>
      <div class="generator-controls">
        <span class="generator-label">Length: {length()}</span>
        <input
          type="range"
          class="gen-slider"
          min="8"
          max="64"
          value={length()}
          onInput={(e) => {
            setLength(parseInt((e.target as HTMLInputElement).value));
            regenerate();
          }}
        />
        <label style={{ display: "flex", "align-items": "center", gap: "4px", color: "var(--t2)", "font-size": "11px" }}>
          <input type="checkbox" checked={upper()} onChange={(e) => { setUpper((e.target as HTMLInputElement).checked); regenerate(); }} />
          ABC
        </label>
        <label style={{ display: "flex", "align-items": "center", gap: "4px", color: "var(--t2)", "font-size": "11px" }}>
          <input type="checkbox" checked={lower()} onChange={(e) => { setLower((e.target as HTMLInputElement).checked); regenerate(); }} />
          abc
        </label>
        <label style={{ display: "flex", "align-items": "center", gap: "4px", color: "var(--t2)", "font-size": "11px" }}>
          <input type="checkbox" checked={numbers()} onChange={(e) => { setNumbers((e.target as HTMLInputElement).checked); regenerate(); }} />
          123
        </label>
        <label style={{ display: "flex", "align-items": "center", gap: "4px", color: "var(--t2)", "font-size": "11px" }}>
          <input type="checkbox" checked={symbols()} onChange={(e) => { setSymbols((e.target as HTMLInputElement).checked); regenerate(); }} />
          !@#
        </label>
        <button class="gen-btn" onClick={regenerate}>Regenerate</button>
      </div>
      <div style={{ "margin-top": "12px", display: "flex", gap: "8px" }}>
        <button class="btn-primary" onClick={handleUse} style={{ flex: 1 }}>Use Password</button>
        <button class="btn-secondary" onClick={props.onClose} style={{ flex: 1 }}>Cancel</button>
      </div>
    </div>
  );
}