// This file is part of Coog. The COPYRIGHT file at the top level of
// this repository contains the full copyright notices and license terms.

import { includes } from 'lodash-es';

import { MyOptionType, StylesConfig } from './Select.types';

/**
 * Types Field Enum
 */
export const StyleEnum = Object.freeze({
  COLOR_EXIST_ERROR: 'rgb(0, 137, 223)',
  COLOR_EXIST_ERROR_FOCUS: 'rgb(176, 207, 224)',
  COLOR_SHOW_ERROR: 'rgb(255, 0, 0)',
  COLOR_SHOW_ERROR_FOCUS: 'rgb(224, 176, 176)',
  COLOR_VALID: 'rgb(0, 128, 0)',
  COLOR_VALID_FOCUS: 'rgba(0, 128, 0, 0.548)',
  FONT_COLOR: 'rgb(74, 74, 74)',
  WIDTH: '400px',
});

/**
 * custom style
 * @param {*} param0
 */
export const styleCustom = ({ width, height, minWidthMenu }: MyOptionType): StylesConfig => {
  // container
  const container = provided => ({
    ...provided,
    width: !includes(width, 'px') ? '100%' : width,
    minWidth: !includes(width, 'px') ? '' : width,
    height: !includes(height, 'px') ? '' : height,
    minHeight: !includes(height, 'px') ? '' : height,
    color: StyleEnum.FONT_COLOR,
  });

  // control
  const control = base => ({
    ...base,
    height: !includes(height, 'px') ? '' : height,
    minHeight: !includes(height, 'px') ? '' : height,
    cursor: 'pointer',
    borderColor: StyleEnum.COLOR_VALID,
    '&:hover': {
      borderColor: StyleEnum.COLOR_VALID,
    },
  });

  // menu
  const menu = base => ({
    ...base,
    minWidth: minWidthMenu,
  });

  // options
  const option = base => ({
    ...base,
    minHeight: '34px',
  });

  return {
    container,
    control,
    menu,
    option,
  };
};