/* eslint-disable array-callback-return */
/* eslint-disable react/prop-types */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { RiArrowDropRightLine } from '@react-icons/all-files/ri/RiArrowDropRightLine';
import Link from 'gatsby-core-theme/src/hooks/link';
import styles from './country-selector.module.scss';

const CountrySelector = ({ pageContext }) => {
  const { translations } = useContext(Context) || {};
  const activeMarket = pageContext.allMarkets[pageContext.page.market];
  activeMarket.market = pageContext.page.market;

  const marketOptions = Object.keys(pageContext.allMarkets).map((key) => [
    key,
    pageContext.allMarkets[key],
  ]);

  // const languages = {
  //   es: 'Spanish',
  // };

  return (
    <div className={styles.container}>
      <p className={styles.title}>
        {translate(
          translations,
          'country_selector_title',
          'To continue: Please select your region and language'
        )}
      </p>
      <p className={styles.desc}>
        {translate(
          translations,
          'country_selector_desc',
          'Lorem ipsum dolor sit amet consectetur. Viverra odio ullamcorper turpis ut placerat sit. Euismod viverra quisque ultricies donec. Facilisi non lorem dolor eu netus porttitor quam phasellus.'
        )}
      </p>
      <div className={styles.countries}>
        <div>
          {marketOptions.map((item) => {
            if (item[0] !== activeMarket.market) {
              const langPage = pageContext.page.hreflangs
                ? pageContext.page.hreflangs.filter((lang) => {
                    const nonActiveMarket = item[0].split('_');
                    return (
                      lang.language === nonActiveMarket[1] && lang.country === nonActiveMarket[0]
                    );
                  })
                : [];

              const path = langPage.length > 0 ? langPage[0].path : item[1].path_prefix || '/';

              // const lang = item[0].split('_')[1];
              return (
                <Link aria-label={item[0]} to={path}>
                  <img
                    width={32}
                    height={32}
                    src={`../../../../../images/${item[0]}.svg`}
                    loading="eager"
                    alt={item[1].path_prefix}
                  />
                  <div>
                    <div>
                      <p>{item[1].path_prefix === null ? 'spanish' : item[1].path_prefix}</p>
                    </div>
                    <RiArrowDropRightLine size={24} />
                  </div>
                </Link>
              );
            }
          })}
        </div>
      </div>
    </div>
  );
};

CountrySelector.propTypes = {
  pageContext: PropTypes.shape({
    allMarkets: PropTypes.shape({
      market: PropTypes.string,
    }),
    page: PropTypes.shape({
      market: PropTypes.string,
      hreflangs: PropTypes.shape({}),
    }),
  }),
};

export default CountrySelector;
