/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import keygen from 'gatsby-core-theme/src/helpers/keygen';
import { BsQuestionCircle } from '@react-icons/all-files/bs/BsQuestionCircle';
import useTranslate from '~hooks/useTranslate/useTranslate';

import Tooltip from '../tooltip';
import styles from './select.module.scss';

export default function Select({
  label = null,
  id,
  onChangeFunc = () => {},
  options,
  refObj,
  index,
  tooltip = null,
  tooltipMinWidth = 10,
  customClass = null,
}) {
  if (!label) {
    return (
      <div
        className={`${styles?.dropdownStyling || ''} ${styles.noLabel || ''} ${
          customClass ? customClass || '' : ''
        } ${tooltip ? styles.tooltip || '' : styles.fullWidth || ''}`}
      >
        <select ref={refObj} onChange={(e) => onChangeFunc(e, index)} id={id}>
          {options.map((option) => <React.Fragment key={keygen()}>{option}</React.Fragment>)}
        </select>
        {tooltip && (
          <Tooltip content={useTranslate(`${id}_tooltip`, tooltip)} minWidth={tooltipMinWidth}>
            <BsQuestionCircle size="2.6rem" title="Question Icon" />
          </Tooltip>
        )}
      </div>
    );
  }

  return (
    <div className={`${styles.selectContainer || ''} ${customClass ? customClass || '' : ''}`}>
      <div className={styles.labelContainer || ''}>
        <label htmlFor={id}>{useTranslate(id, label)}</label>
        {tooltip && (
          <Tooltip content={useTranslate(`${id}_tooltip`, tooltip)} minWidth={tooltipMinWidth}>
            <BsQuestionCircle size="2.6rem" title="Question Icon" />
          </Tooltip>
        )}
      </div>
      <div
        className={`${styles?.dropdownStyling || ''} ${
          tooltip ? styles.tooltip || '' : styles.fullWidth || ''
        }`}
      >
        <select ref={refObj} onChange={(e) => onChangeFunc(e, index)} id={id}>
          {options.map((option) => <React.Fragment key={keygen()}>{option}</React.Fragment>)}
        </select>
      </div>
    </div>
  );
}

Select.propTypes = {
  label: PropTypes.string,
  id: PropTypes.string,
  onChangeFunc: PropTypes.func,
  options: PropTypes.arrayOf(PropTypes.any),
  refObj: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({})]),
  index: PropTypes.number,
  tooltip: PropTypes.string,
  tooltipMinWidth: PropTypes.number,
  customClass: PropTypes.string,
};
