import { GoabDropdown, GoabDropdownItem, GoabFormItem } from "@abgov/react-components";
import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common";
import { useState } from "react";

export function DropdownRoute() {
  const parents = ["One", "Two", "Three"];
  const childrenOne = ["Alpha", "Beta"];
  const childrenTwo = ["Alpha", "Beta", "Gamma"];
  const childrenThree = ["Alpha", "Gamma"];
  const [children, setChildren] = useState<string[]>([]);

  const loadSchemas = (details: GoabDropdownOnChangeDetail) => {
    if (typeof details.value === "string") {
      if (details.value === "One") setChildren(childrenOne);
      else if (details.value === "Two") setChildren(childrenTwo);
      else setChildren(childrenThree);
    }
  };

  const log = () => {
    console.log("Children Changed");
  };

  return (
    <main>
      <GoabFormItem label="Parent" requirement="optional">
        <GoabDropdown name="parent" placeholder="Select a value" onChange={loadSchemas}>
          {parents.map((parent) => (
            <GoabDropdownItem key={parent} value={parent} label={parent} />
          ))}
        </GoabDropdown>
      </GoabFormItem>
      <GoabFormItem label="Children" requirement="optional">
        <GoabDropdown name="children" placeholder="Select a value" onChange={log}>
          {children.map((child, index) => (
            <GoabDropdownItem key={child} value={child} label={child} />
          ))}
        </GoabDropdown>
      </GoabFormItem>
    </main>
  );
}