import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { config } from 'config/general';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import account from 'store/account';
import styleIdentifiers from './LanguageSelector.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type LanguageSelectorProps = StateProps & DispatchProps & OwnProps;

const LanguageSelector = (props: LanguageSelectorProps) => {
  const { onSelect, active } = props;

  const [defaultLg, setDefaultLg] = useState(active[0]);

  const languages = () => {
    const res = [];

    for (let index = 0; index < config.languages.length; index++) {
      const element = config.languages[index];
      res.push({
        value: element.value || element.short,
        label: element.label || element.long,
      });
    }

    return res;
  };

  function handleActive(val) {
    return active.includes(val);
  }

  function handleSelect(val) {
    const res = [...active];

    const index = res.indexOf(val);

    if (index < 0) res.push(val);
    else res.splice(index, 1);

    if (onSelect) onSelect(res);
  }

  function handleChangeDefault(val, e) {
    e.preventDefault();
    const res = [...active];

    setDefaultLg(val);
    res[0] = val;

    if (onSelect) onSelect(res);
  }

  function handleSelectAll() {
    let values = [];
    if (active.length === languages().length) {
      values = [defaultLg];
    } else {
      values = languages().map(function(item) {
        return item.value;
      });
    }

    if (onSelect) onSelect(values);
  }

  const listLanguages = languages();
  const numLanguages = listLanguages.length;

  return (
    numLanguages !== 1 && (
      <div className={styles('language-selector')}>
        <div className={styles('item-container')}>
          <div className={styles('item-individual')}>
            {defaultLg && (
              <div className={styles('item-lg', handleActive(defaultLg) && 'active')}>
                {defaultLg}
              </div>
            )}
            <div className={styles('separator')}>+</div>
            {listLanguages
              .filter(e => e.value !== defaultLg)
              .map((item, key) => (
                <div
                  key={key}
                  onClick={() => handleSelect(item.value)}
                  onDoubleClick={e => handleChangeDefault(item.value, e)}
                  className={styles('item-lg', handleActive(item.value) && 'active')}
                >
                  {item.value}
                </div>
              ))}
          </div>
          <div className={styles('item-all')}>
            <div
              className={styles('item-lg', 'all-select', active.length >= numLanguages && 'active')}
              onClick={handleSelectAll}
            >
              <TextItem
                path={
                  active.length >= numLanguages ? 'admin.buttons.hide' : 'admin.buttons.showAll'
                }
              />
            </div>
          </div>
        </div>
      </div>
    )
  );
};

export default LanguageSelector;
