import { SchemaFieldProps, StringField as StringFieldType } from '@vev/utils';
import React, { useRef, useState } from 'react';
import { SilkeTextField } from '../../silke-text-field';
import { getTitle } from './utils/schema-util';
import { SilkeBox } from '../../silke-box';
import { SilkeText, SilkeTextSmall } from '../../silke-text';
import { SilkeIconTooltip } from '../../silke-tooltip';
import { SilkeIcon } from '../../silke-icon';
import { SilkeButton } from '../../silke-button';
import { SilkePopover } from '../../silke-popover';

const StringField = ({
  schema,
  value,
  disabled,
  readonly,
  onChange,
}: SchemaFieldProps<StringFieldType>) => {
  const { options } = schema;

  const textFieldRef = useRef(null);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const [showSuggestions, setShowSuggestions] = useState(false);

  const suggestion = schema.options?.suggestions?.find((suggestion) => {
    return suggestion.value === `${value}`;
  });

  if (schema.options?.suggestions && schema.options?.suggestions.length) {
    if (suggestion) {
      return (
        <SilkeBox column>
          <SilkeBox vAlign="center" style={{ fontSize: '12px' }}>
            <SilkeTextSmall>{getTitle(schema)}</SilkeTextSmall>
            {schema.description && <SilkeIconTooltip tooltip={schema.description} icon="tooltip" />}
          </SilkeBox>
          <SilkeBox gap="s" hPad="s" vPad="xs" align bg="surface-2" flex rounded="tiny">
            <SilkeIcon icon="interaction.icon" />
            <SilkeText size="small">{suggestion.label}</SilkeText>
            <SilkeButton
              icon="close"
              kind="ghost"
              size="s"
              onClick={() => {
                onChange(null);
              }}
            />
          </SilkeBox>
        </SilkeBox>
      );
    }
  }

  return (
    <SilkeBox>
      <SilkeTextField
        ref={textFieldRef}
        disabled={disabled}
        readOnly={readonly}
        value={value || ''}
        multiline={!!options?.multiline}
        style={{}}
        label={getTitle(schema)}
        type={options?.type || 'text'}
        minLength={options?.minLength}
        maxLength={options?.maxLength}
        onChange={onChange}
        size="s"
        placeholder={options?.placeholder}
        flex
        tooltip={schema?.description}
        onFocus={() => {
          setShowSuggestions(true);
        }}
        onBlur={(e) => {
          if (!dropdownRef.current?.contains(e.relatedTarget as Node)) {
            setShowSuggestions(false);
          }
        }}
      />
      {showSuggestions && schema.options?.suggestions && (
        <SilkePopover
          anchorOrigin="bottom-center"
          targetOrigin="top-center"
          offsetY={1}
          anchor={textFieldRef}
          matchAnchorWidth
        >
          <SilkeBox
            ref={dropdownRef}
            rounded="tiny"
            cursor="pointer"
            column
            pad="xs"
            bg="neutral-20"
          >
            {schema.options?.suggestions.map((suggestion) => {
              return (
                <SilkeBox
                  pad="xs"
                  rounded="tiny"
                  bgHover="neutral-30"
                  flex
                  gap="s"
                  height="s"
                  vAlign
                  tabIndex={-1}
                  onClick={() => {
                    setShowSuggestions(false);
                    onChange(suggestion.value);
                  }}
                >
                  {suggestion.icon && (suggestion.icon as React.ReactNode)}
                  <SilkeTextSmall>{suggestion.label}</SilkeTextSmall>
                </SilkeBox>
              );
            })}
          </SilkeBox>
        </SilkePopover>
      )}
    </SilkeBox>
  );
};

export default StringField;