import React, { useMemo } from 'react';
import {
  FormField,
  Dropdown as DropdownWSR,
  DropdownLayoutOption,
} from '@wix/design-system';
import { BaseInputProps } from '../BaseInput';
import { Field } from '../Field';
import { dataHooks } from '../dataHooks';

export interface DropdownProps extends BaseInputProps<string> {}

export const Dropdown = ({
  dataHook,
  schema,
  initialValue,
  onChange,
}: DropdownProps) => {
  const options: DropdownLayoutOption[] = useMemo(
    () => schema.options?.map((o) => ({ id: o, value: o })) || [],
    [schema],
  );

  return (
    <Field dataHook={dataHook} type={schema.type}>
      <FormField label={schema.label} dataHook={dataHooks.Label}>
        <DropdownWSR
          dataHook={dataHooks.Input}
          options={options}
          initialSelectedId={initialValue}
          onSelect={({ id }) => onChange(id as string)}
        />
      </FormField>
    </Field>
  );
};