import React, { useState } from 'react';
import Select from 'react-select';
import Tooltip from '../../../components/core/Tooltip';
import { displayProPopup } from '../../../Helper';
import { translate } from '../../../Helper';

const EereSelect = ({
  id,
  label,
  options,
  value,
  onChange,
  width,
  classNamePrefix,
  isSearchable,
  placeholder,
  isMulti,
  tooltip,
  marginTop,isPro=true
}) => {
  const [mouseHover, setMouseHover] = useState(false);

  const handleMouseEnter = () => {
        setMouseHover(true);
  };
  
  const handleMouseLeave = () => {
        setMouseHover(false);
  };
  const handleChange = (selectedOption) => {
    onChange(selectedOption); // Pass the selected option(s) to the parent component
  };

  const formatValue = (value) => {
    if (!options || !Array.isArray(options)) {
      console.error('Options should be an array', options);
      return isMulti ? [] : null;
    }
    
    if (isMulti) {
      // For multi-select, ensure value is an array of option objects
      return options.filter(option => value.some(v => v.value === option.value));
    } else {
      // For single select, find the option object
      return options.find(option => option.value === value) || null;
    }
  };

  return (
    <div className={`select-wrapper ${marginTop ? marginTop : ''} ${mouseHover ? "pro-lock-hover" : "" }`} onClick={ !isPro ? displayProPopup : undefined }>
      <label htmlFor={id} className="ecre-text-sm ecre-font-medium ecre-inline-block ecre-pb-2">
      <span className={`ecre-mr-2.5 ${ !isPro ? 'ecre-opacity-50' : ''}`}>{label}</span>
        {tooltip && <Tooltip className="ecre-align-[-2px] ecre-mr-1" content={tooltip} />}
        {!isPro && (
            <button className='ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal '>
              <span className="icon-wrap">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                      <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0"/>
                      <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0"/>
                  </svg>
              </span>
              <span className="text">
                  {translate('upgrade')}
              </span>
          </button>
        )}
      </label>
      <div className="ecre-w-full">
        <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={`ecre-max-w-${width}`}>
          <Select
            id={id}
            className={`echorewards-react-select ecre-max-w-${width} ${
              !isPro ? 'ecre-opacity-50 ecre-bg-gray-200 ' : ''}`}
            classNamePrefix={classNamePrefix}
            value={formatValue(value)} // Format value based on isMulti
            onChange={handleChange}
            options={options ? options : []}
            isSearchable={isSearchable}
            placeholder={placeholder}
            isMulti={isMulti}
            isDisabled={!isPro}
          />
        </div>
      </div>
    </div>
  );
};

export default EereSelect;