/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/forbid-prop-types */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { BsQuestionCircle } from '@react-icons/all-files/bs/BsQuestionCircle';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import Tooltip from '../tooltip';
import styles from './select.module.scss';

export default function Select({
  label = null,
  id,
  onChangeFunc = () => {},
  options,
  refObj,
  index,
  tooltip = null,
}) {
  const { translations } = useContext(Context) || {};

  if (!label) {
    return (
      <div
        className={`${styles?.dropdownStyling || ''} ${
          tooltip ? styles.tooltip || '' : styles.fullWidth || ''
        }`}
      >
        <select ref={refObj} onChange={(e) => onChangeFunc(e, index)} id={id}>
          {options.map((option) => option)}
        </select>
        {tooltip && (
          <Tooltip content={translate(translations, `${id}_tooltip`, tooltip)}>
            <BsQuestionCircle size="2.6rem" title="Question Icon" />
          </Tooltip>
        )}
      </div>
    );
  }

  return (
    <label htmlFor={id}>
      <div>
        {translate(translations, id, label)}
        {tooltip && (
          <Tooltip content={translate(translations, `${id}_tooltip`, tooltip)}>
            <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) => option)}
        </select>
      </div>
    </label>
  );
}

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