import React, { useState, useEffect } from 'react';
import Select, { StylesConfig, components } from 'react-select';
import arrow from '@/../public/images/home/arrow-link-select.svg';
import Image from 'next/image';
import { useTranslation } from 'next-i18next';
import Link from 'next/link';
type OptionType = {
  label: string;
  value: string;
  link: string;
};

type Props = {
  options: OptionType[];
  placeholder?: string;
};

const CustomOption = (props: any) => {
  const { data, innerRef, innerProps, isFocused } = props;

  return (
    <div ref={innerRef} {...innerProps}>
      <Link
        href={data.link}
        rel="noopener noreferrer"
        style={{
          display: 'flex',
          padding: '8px 12px',
          backgroundColor: isFocused ? '#EDE8D8' : 'transparent',
          color: '#4A4A4A',
          textDecoration: 'none',
          fontFamily: '"IBM", sans-serif',
          fontSize: '14px',
          fontWeight: 400
        }}

      >
        {data.label} <Image src={arrow} alt="arrow icon" style={{ marginLeft: '10px', width: '10px' }} />
      </Link>
    </div>
  );
};

const CustomDropdownIndicator = (props: any) => {
  const { selectProps } = props;
  const { t } = useTranslation(['common']);
  return (
    <components.DropdownIndicator {...props}>
      <button
        type="button"
        onClick={(e) => {
          e.preventDefault();
          selectProps.selectRef?.current?.focus();
        }}
        style={{
          backgroundColor: '#8C745B',
          border: '1px solid #8C745B',
          padding: '10px 25px',
          fontSize: '14px',
          fontFamily: '"IBM", sans-serif',
          cursor: 'pointer',
          borderRadius: '5px',
          fontWeight: '700',
          textTransform: 'uppercase',
          color: 'white'
        }}
      >
        {t('common:search')}
      </button>
    </components.DropdownIndicator>
  );
};

const LinkSelectSearcheable: React.FC<Props> = ({ options, placeholder = 'Seleccionar ciudad' }) => {
  const customStyles: StylesConfig<OptionType, false> = {
    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
    control: (base) => ({
      ...base,
      backgroundColor: '#FFFFFF',
      border: 'none',
      boxShadow: 'none',
      color: '#7F7F7F',
      minHeight: 'auto',
      fontFamily: '"IBM", sans-serif',
      fontSize: '14px',
      fontWeight: 400,
      paddingLeft: '25px'
    }),
    singleValue: (base) => ({
      ...base,
      color: '#4A4A4A',
      fontFamily: '"IBM", sans-serif',
      fontSize: '14px',
      fontWeight: 400
    }),
    input: (base) => ({
      ...base,
      color: '#000000',
      fontFamily: '"IBM", sans-serif',
      fontSize: '14px',
      fontWeight: 400
    }),
    placeholder: (base) => ({
      ...base,
      color: '#7F7F7F',
      fontFamily: '"IBM", sans-serif',
      fontSize: '14px',
      fontWeight: 400
    }),
    indicatorSeparator: () => ({
      display: 'none'
    }),
    menu: (base) => ({
      ...base,
      backgroundColor: '#F5F5F5E5',
      boxShadow: 'none',
      border: '1px solid rgba(245, 242, 232, 0.2)',
      fontFamily: '"IBM", sans-serif',
      zIndex: 40
    }),
    menuList: (base) => ({
      ...base,
      maxHeight: '200px',
      overflowY: 'auto',
      zIndex: 40
    }),
    option: () => ({})
  };

  return (
    <Select
      menuPortalTarget={typeof window !== 'undefined' ? document.body : null}
      options={options}
      placeholder={placeholder}
      isSearchable
      components={{ Option: CustomOption, DropdownIndicator: CustomDropdownIndicator }}
      styles={customStyles}
    />
  );
};

export default LinkSelectSearcheable;