import React, { useRef } from "react";
import { View } from "react-native";
import type { TriggerRef } from "@rn-primitives/select";
import { Button, Select } from "@jobber/components-native";
import { ProvinceItems } from "./SelectComposableProvinces";

/** The trigger ref exposes imperative `open()` / `close()`. */
export function SelectComposableControlledWithRef() {
  const triggerRef = useRef<TriggerRef>(null);

  return (
    <View style={{ gap: 16 }}>
      <Select.Root>
        <Select.Label>Province</Select.Label>
        <Select.Trigger ref={triggerRef}>
          <Select.Value placeholder="Select a province" />
        </Select.Trigger>
        <Select.Content>
          <ProvinceItems />
        </Select.Content>
      </Select.Root>
      <Button
        label="Open the dropdown"
        onPress={() => triggerRef.current?.open()}
      />
    </View>
  );
}