import React, { useEffect, useState, useCallback } from "react";
import Select from "../common/Select";
import Option from "../common/option";
import { GeneralIdRef } from "../../utils/GeneralIdRef";
import roleService from "../../modules/manager/domains/serrvices/rolesService";

interface RolePickerProps {
  name: string;
  label: string;
  error?: string;
  value: any;
  domain: GeneralIdRef;
  onChange?: (name: string, value: GeneralIdRef) => void;
  includeLabel?: boolean;
}

export default function RolePicker({
  name,
  label,
  error,
  value,
  domain,
  onChange,
  includeLabel = true,
}: RolePickerProps) {
  const [options, setOptions] = useState<Option[] | undefined>(undefined);

  useEffect(() => {
    async function load() {
      const pagedData = await roleService.getRoles(0, 10, "name", true, domain);
      if (pagedData) {
        const opts: Option[] = (pagedData.data as any[]).map((x) => ({
          _id: x.id,
          name: x.name,
        }));
        setOptions(opts);
      }
    }

    load();
  }, []);

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLSelectElement>) => {
      const input = e.currentTarget;
      const generalIdRef: GeneralIdRef = {
        id: BigInt(input.value),
      };

      if (onChange) onChange(input.name, generalIdRef);
    },
    [onChange],
  );

  return (
    <Select
      name={name}
      label={label}
      error={error}
      value={String(value?.id)}
      options={options}
      includeBlankFirstEntry={true}
      onChange={handleChange}
      includeLabel={includeLabel}
    />
  );
}