/** @format */

import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

import { DispatchEvent } from '../../../utils';

const Tab = styled.div`
  display: flex;
  justify-content: space-between;
  .tabItem {
    font-size: 14px;
    color: #999;
    padding: 4px 0;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
  }
  .icon {
    width: 18px;
    max-height: 100%;
    margin-right: 4px;
  }
`;

let timer: number | null;
const styleBase = {
  height: 34,
};

interface IconTabsProps {
  size?: Record<string, any>;
  [key: string]: any;
}

const IconTabs = (props: IconTabsProps) => {
  const {
    id,
    size,
    data = [],
    timeGap = 2000,
    isLoop = false,
    titleStyle = {},
    activeStyle = {},
    activeIndex = 0,
  } = props;

  const baseActive = {
    color: '#2db9ff',
    borderBottom: '2px solid #2db9ff',
  };

  const style = _.merge(styleBase, size);
  const as = _.merge({}, titleStyle, baseActive, activeStyle);

  const [active, setActive] = useState(activeIndex);
  const [isLoopState, setIsLoopState] = useState(isLoop);
  const [timeGapState, setTimeGapState] = useState(timeGap);
  const [isMouseEnter, setIsMouseEnter] = useState(false);
  const [refreshKey, setRefreshKey] = useState<number>(-1);

  useEffect(() => {
    setIsLoopState(isLoop);
  }, [isLoop]);

  useEffect(() => {
    setTimeGapState(timeGap);
  }, [timeGap]);

  useEffect(() => {
    setActive(activeIndex);
  }, [activeIndex]);

  function clearTimer() {
    if (timer && isLoopState) {
      clearInterval(timer);
      timer = null;
    }
  }
  function setTimer(d: Record<string, any>[], gap: number) {
    timer = setInterval(() => {
      setActive((ac: number) => {
        if (ac === d.length - 1) {
          return 0;
        } else {
          return ac + 1;
        }
      });
    }, gap);
  }

  useEffect(() => {
    clearTimer();
    if (isLoopState && !isMouseEnter) {
      setTimer(data, timeGapState);
    } else {
      clearTimer();
    }
    return () => clearTimer();
  }, [data, timeGapState, isLoopState, isMouseEnter, refreshKey]);

  useEffect(() => {
    if (id && data && data.length) {
      DispatchEvent(id, 'event-tab-click', {
        id: active,
        content: (data[active] && data[active].name) || '',
      });
    }
  }, [id, active, data]);

  function handleTabClick(index: number) {
    setActive(index);
    setRefreshKey(Math.random());
  }

  useEffect(() => {
    if (!id) {
      return;
    }
    function handleSelect(e: any) {
      try {
        const result = e.detail;
        setActive(result.id);
      } catch (error) {
        console.error(error);
      }
    }
    function handleAutoCarousel(e: any) {
      try {
        setTimeGapState(e.detail.duration);
        setIsLoopState(true);
      } catch (error) {
        console.error(error);
      }
    }
    function handleCloseAutoCarousel() {
      try {
        setIsLoopState(false);
      } catch (error) {
        console.error(error);
      }
    }
    document.addEventListener(`edata-${id}-select`, handleSelect);
    document.addEventListener(`edata-${id}-autoCarousel`, handleAutoCarousel);
    document.addEventListener(
      `edata-${id}-closeAutoCarousel`,
      handleCloseAutoCarousel,
    );

    return () => {
      if (!id) {
        return;
      }
      document.removeEventListener(`edata-${id}-select`, handleSelect);
      document.removeEventListener(
        `edata-${id}-autoCarousel`,
        handleAutoCarousel,
      );
      document.removeEventListener(
        `edata-${id}-closeAutoCarousel`,
        handleCloseAutoCarousel,
      );
    };
  }, [id]);

  return (
    <Tab
      style={style}
      onMouseEnter={() => setIsMouseEnter(true)}
      onMouseLeave={() => setIsMouseEnter(false)}
    >
      {data &&
        typeof data.map === 'function' &&
        data.map((item: Record<string, any>, index: number) => (
          <div
            style={active === index ? as : titleStyle}
            className="tabItem"
            key={index}
            onClick={() => handleTabClick(index)}
          >
            {item.icon && (
              <img
                className="icon"
                src={
                  active === index && item.selectIcon
                    ? item.selectIcon
                    : item.icon
                }
              />
            )}
            {item.name}
          </div>
        ))}
    </Tab>
  );
};

export default IconTabs;