import React, { useState } from "react";
import { View } from "react-native";
import { Select, Text } from "@jobber/components-native";

interface Option {
  value: string;
  label: string;
}

const UNITED_STATES = { value: "us", label: "United States" };
const COUNTRIES = [UNITED_STATES, { value: "ca", label: "Canada" }];
const REGIONS: Record<string, Option[]> = {
  us: [
    { value: "california", label: "California" },
    { value: "new-york", label: "New York" },
  ],
  ca: [
    { value: "alberta", label: "Alberta" },
    { value: "ontario", label: "Ontario" },
  ],
};

/** Dependent options: changing country clears the controlled region value. */
export function SelectComposableDependentOptions() {
  const [country, setCountry] = useState<Option | undefined>(UNITED_STATES);
  const [region, setRegion] = useState<Option | undefined>();
  const regions = country ? REGIONS[country.value] : [];

  return (
    <View style={{ gap: 16 }}>
      <Text variation="subdued">
        Select California, then change the country to Canada. State/Province
        should return to its placeholder.
      </Text>

      <Select.Root
        value={country}
        onValueChange={option => {
          setCountry(option as Option | undefined);
          setRegion(undefined);
        }}
      >
        <Select.Label>Country</Select.Label>
        <Select.Trigger>
          <Select.Value placeholder="Select a country" />
        </Select.Trigger>
        <Select.Content>
          {COUNTRIES.map(option => (
            <Select.Item
              key={option.value}
              value={option.value}
              label={option.label}
            />
          ))}
        </Select.Content>
      </Select.Root>

      <Select.Root
        value={region}
        onValueChange={option => setRegion(option as Option | undefined)}
      >
        <Select.Label>State/Province</Select.Label>
        <Select.Trigger>
          <Select.Value placeholder="Select a state/province" />
        </Select.Trigger>
        <Select.Content>
          {regions.map(option => (
            <Select.Item
              key={option.value}
              value={option.value}
              label={option.label}
            />
          ))}
        </Select.Content>
      </Select.Root>
    </View>
  );
}