import { useEffect, useState } from "react";

type Props = {
  updateIdList: (cids: string[]) => void;
};

export default function IdComponent({ updateIdList }: Props) {
  const [idSet, setIdSet] = useState<Set<string>>(new Set());
  const onValidId = (id: string) => {
    const newSet = new Set(idSet.add(id));
    setIdSet(newSet);
    updateIdList([...newSet]);
  };
  const removeCid = (id: string) => {
    const newSet = new Set([...idSet].filter((x) => x !== id));
    setIdSet(newSet);
    updateIdList([...newSet]);
  };
  return (
    <div className="flex justify-center">
      <div className="flex flex-col gap-2">
        {Array.from(idSet).map((v) => (
          <FixedId cid={v} removeCid={removeCid} key={v} />
        ))}
        <SingleIdComponent onValidId={onValidId} />
      </div>
    </div>
  );
}

type FixedIdProps = {
  cid: string;
  removeCid: (cid: string) => void;
};

function FixedId({ cid, removeCid }: FixedIdProps) {
  return (
    <div className="flex gap-2">
      <input type="text" className="border-2" disabled value={cid} />
      <button
        className="rounded-md bg-red-300 p-2"
        onClick={() => removeCid(cid)}
      >
        ลบ
      </button>
    </div>
  );
}

type SingleIdProps = {
  onValidId: (cid: string) => void;
};

function SingleIdComponent({ onValidId }: SingleIdProps) {
  const [isValid, setIsValid] = useState(false);
  const [cid, setCid] = useState("");
  useEffect(() => {
    const isValidId = isValidThaiID(cid);
    setIsValid(isValidId);
    if (isValidId) {
      onValidId(cid);

      setCid("");
    }
  }, [cid, onValidId]);
  return (
    <div className="flex gap-2">
      <input
        type="text"
        className="border-2"
        onChange={(v) => setCid(v.target.value)}
        value={cid}
      />
      {isValid ? <p>OK</p> : null}
    </div>
  );
}

function isValidThaiID(id: string) {
  if (!/^\d{13}$/.test(id)) {
    return false;
  }
  let sum = 0;
  for (let i = 0; i < 12; i++) {
    sum += Number(id[i]) * (13 - i);
  }
  const checkSum = (11 - (sum % 11)) % 10;
  return checkSum === Number(id[12]);
}