import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';
import { CustomFieldModalState, CustomFieldType } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';

export interface CustomFieldTypeDropdownProps {
  state: CustomFieldModalState;
}

export const _CustomFieldTypeDropdown = (
  props: CustomFieldTypeDropdownProps,
) => {
  const {
    state: {
      form: {
        $: { type, name },
      },
      mode,
      generateUniqueKey,
      setKeyFieldIfNotDirty,
    },
  } = props;

  const { translate: t } = useWixPatternsContainer();

  const [fieldTypeOptions] = React.useState(() => [
    listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-shortText',
      id: 'shortText',
      prefix: (
        <Box>
          {getFieldTypeIcon({ fieldType: 'SHORT_TEXT', size: 'medium' })}
        </Box>
      ),
      title: t('cairo.customFields.fieldType.shortText'),
      label: t('cairo.customFields.fieldType.shortText'),
    }),
    listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-longText',
      id: 'longText',
      prefix: (
        <Box>
          {getFieldTypeIcon({ fieldType: 'LONG_TEXT', size: 'medium' })}
        </Box>
      ),
      title: t('cairo.customFields.fieldType.longText'),
      label: t('cairo.customFields.fieldType.longText'),
    }),
    listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-date',
      id: 'date',
      prefix: (
        <Box>
          {getFieldTypeIcon({ fieldType: 'DATE', size: 'medium' })}
        </Box>
      ),
      title: t('cairo.customFields.fieldType.date'),
      label: t('cairo.customFields.fieldType.date'),
    }),
    listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-dateTime',
      id: 'dateTime',
      prefix: (
        <Box>
          {getFieldTypeIcon({ fieldType: 'DATE_TIME', size: 'medium' })}
        </Box>
      ),
      title: t('cairo.customFields.fieldType.dateAndTime'),
      label: t('cairo.customFields.fieldType.dateAndTime'),
    }),
    listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-integer',
      id: 'integer',
      prefix: (
        <Box>
          {getFieldTypeIcon({ fieldType: 'INTEGER', size: 'medium' })}
        </Box>
      ),
      title: t('cairo.customFields.fieldType.numberInteger'),
      label: t('cairo.customFields.fieldType.numberInteger'),
    }),
    listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-decimal',
      id: 'decimal',
      prefix: (
        <Box>
          {getFieldTypeIcon({ fieldType: 'DECIMAL', size: 'medium' })}
        </Box>
      ),
      title: t('cairo.customFields.fieldType.numberDecimal'),
      label: t('cairo.customFields.fieldType.numberDecimal'),
    }),
    listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-checkbox',
      id: 'checkbox',
      prefix: (
        <Box>
          {getFieldTypeIcon({ fieldType: 'CHECKBOX', size: 'medium' })}
        </Box>
      ),
      title: t('cairo.customFields.fieldType.checkbox'),
      label: t('cairo.customFields.fieldType.checkbox'),
    }),
    listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-url',
      id: 'url',
      prefix: (
        <Box>
          {getFieldTypeIcon({ fieldType: 'URL', size: 'medium' })}
        </Box>
      ),
      title: t('cairo.customFields.fieldType.url'),
      label: t('cairo.customFields.fieldType.url'),
    }),
    /* listItemSelectBuilder({
      dataHook: 'custom-field-modal-type-dropdown',
      id: 'dropdown',
      prefix: (
        <Box>
          <DropdownIcon />
        </Box>
      ),
      title: t('cairo.customFields.fieldType.dropdownList'),
      label: t('cairo.customFields.fieldType.dropdownList'),
    }),*/
  ]);

  return (
    <Dropdown
      dataHook="custom-field-modal-type"
      disabled={mode === 'edit'}
      valueParser={(option) => option.label}
      selectedId={type.value}
      onSelect={({ id }) => {
        type.onChange(id as CustomFieldType);
        setKeyFieldIfNotDirty(generateUniqueKey(name.value));
      }}
      popoverProps={{ appendTo: 'window', zIndex: 5001 }}
      dropdownWidth="258px"
      placeholder={t(
        'cairo.customFields.addCustomField.modal.fieldType.placeholder',
      )}
      options={fieldTypeOptions}
    />
  );
};

export const CustomFieldTypeDropdown = observer(_CustomFieldTypeDropdown);
