import {FieldSelector} from 'components';
import PropTypes from 'prop-types';
import {PanelLabel} from 'components/common/styled-components';
import {FormattedMessage} from 'localization';
import React, {Component} from 'react';
import {ALL_FIELD_TYPES} from 'constants/default-settings';

export type HexColumnConfigFactoryProps = {
  onSelectColumn: Function
  fields?: any[],
  value?: string,
  iconComponent?: React.ReactNode,
}

export function HexColumnConfigFactory() {
  class HexColumnConfig extends Component<HexColumnConfigFactoryProps> {
    static propTypes = {
      fields: PropTypes.arrayOf(PropTypes.any),
      value: PropTypes.string,
      onSelectColumn: PropTypes.func.isRequired
    };

    render() {
      const {fields, value, onSelectColumn, iconComponent} = this.props;
      const IconElement = () => iconComponent || null;

      return (
        <>
          <div className="color-palette__config__label">
            <PanelLabel>
              <FormattedMessage id={`color.hexColumn.field`} />
              {/* @ts-ignore */}
              <IconElement data-test="icon-help-button" />
            </PanelLabel>
          </div>
          <div>
            <FieldSelector
              fields={fields.filter(f => f.type === ALL_FIELD_TYPES.string)}
              value={value}
              placeholder="placeholder.selectField"
              onSelect={onSelectColumn}
              erasable={false}
              onFocus={() => null}
              onBlur={() => null}
            />
          </div>
        </>
      );
    }
  }

  return HexColumnConfig;
}