import { SchemaFieldProps, SelectField as SelectFieldType, SelectFieldItem } from '@vev/utils';
import { isArray, isFunction } from 'lodash';
import React, { useEffect, useState } from 'react';
import { SilkeTextSmall } from '../../silke-text';
import { SilkeAutocompleteField } from '../../silke-autocomplete-field';
import { SilkeBox } from '../../silke-box';
import { SilkeCheckbox } from '../../silke-checkbox';
import { SilkeRadioButton } from '../../silke-radio-button';
import { SilkeSelectField } from '../../silke-select-field';
import { useSchemaContext } from '../silke-schema-context';

import { getTitle } from './utils/schema-util';

const SelectField = (props: SchemaFieldProps<SelectFieldType>) => {
  const {
    onChange,
    schema,
    disabled,
    readonly,
    schema: { options, name, options: { multiselect = false, display, placeholder } = {} },
    value,
  } = props;

  const [items, setItems] = useState<SelectFieldItem[]>([]);
  const schemaItems = options?.items || [];
  const context = useSchemaContext();

  useEffect(() => {
    if (!schemaItems) return;
    if (isFunction(schemaItems)) {
      const res = schemaItems(context);
      if (isArray(res)) setItems(res);
      else res.then(setItems);
    } else {
      setItems(schemaItems);
    }
  }, [schemaItems, context]);

  if (multiselect && (!display || display === 'checkbox')) {
    const values = (value as string[]) || [];
    return (
      <SilkeBox column flex vPad="xs" gap="xs">
        <SilkeTextSmall>{getTitle(schema)}</SilkeTextSmall>
        <SilkeBox
          column
          bg="surface-1"
          rounded="small"
          pad="s"
          gap="xs"
          style={{ border: '1px solid var(--color-surface-3)' }}
        >
          {items.map((item, index) => (
            <SilkeCheckbox
              key={index}
              disabled={disabled}
              readOnly={readonly}
              label={item.label}
              size="s"
              value={values.includes(item.value) || false}
              onChange={(checked: boolean) =>
                checked
                  ? onChange([...values, item.value])
                  : onChange(values.filter((e) => e !== item.value))
              }
            />
          ))}
        </SilkeBox>
      </SilkeBox>
    );
  }

  if (display === 'dropdown') {
    return (
      <SilkeSelectField
        label={getTitle(schema)}
        value={props.value}
        multiple={multiselect}
        name={name}
        items={items}
        disabled={disabled}
        readOnly={readonly}
        placeholder={placeholder}
        onChange={onChange}
        size="s"
        renderItem={(item) => {
          return (
            <SilkeTextSmall style={{ paddingLeft: '4px' }} overflow>
              {item.item.label}
            </SilkeTextSmall>
          );
        }}
      />
    );
  }
  if (display === 'autocomplete') {
    return (
      <SilkeAutocompleteField
        value={props.value}
        multiple={multiselect}
        name={name}
        label={getTitle(schema)}
        items={items}
        disabled={disabled}
        readOnly={readonly}
        placeholder={placeholder}
        onChange={onChange}
        size="s"
      />
    );
  }

  return (
    <SilkeBox column flex vPad="xs" gap="xs">
      <SilkeTextSmall>{getTitle(schema)}</SilkeTextSmall>
      <SilkeBox
        column
        bg="surface-1"
        rounded="small"
        pad="s"
        gap="xs"
        style={{ border: '1px solid var(--color-surface-3)' }}
      >
        {items?.map((item, i) => (
          <SilkeRadioButton
            key={i}
            {...item}
            name={name}
            size="small"
            disabled={disabled}
            readOnly={readonly}
          />
        ))}
      </SilkeBox>
    </SilkeBox>
  );
};

export default SelectField;