/** @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: #fff;
    padding: 2px 4px;
    border: 1px solid #004cad;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .noBorder {
    border: none;
  }
  .active {
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -5px;
      left: 0;
      right: 0;
      margin: auto;
      width: 30%;
      height: 3px;
      background-image: linear-gradient(
        to right,
        rgba(84, 254, 254, 1),
        rgba(62, 166, 255, 1)
      );
    }
  }
`;

let timer: number | null = null;

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

const Tabs = (props: TabsProps) => {
  const {
    id,
    size,
    data = [],
    timeGap = 2000,
    isLoop = false,
    titleStyle = {},
    activeBg = 'rgba(0, 76, 173, 0.4)',
    activeIndex = 0,
    activeUseBg,
    activeColor,
  } = props;
  const styleBase = {
    height: 34,
  };

  const style = _.merge(styleBase, size);
  const activeStyle = _.merge({}, titleStyle, {
    background: activeBg,
    color: activeColor,
  });
  const activeLineStyle = _.merge({}, titleStyle, { color: activeColor });

  const [active, setActive] = useState(activeIndex);
  const [isLoopState, setIsLoopState] = useState(isLoop);
  const [timeGapState, setTimeGapState] = useState(timeGap);
  const [isMouseEnter, setIsMouseEnter] = useState(false);
  const [refreshKey, setRefreshKey] = useState(-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(() => {
    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
                ? activeUseBg
                  ? activeStyle
                  : activeLineStyle
                : titleStyle
            }
            className={
              active === index
                ? activeUseBg
                  ? 'tabItem noBorder'
                  : 'active tabItem noBorder'
                : activeUseBg
                ? 'tabItem'
                : 'tabItem noBorder'
            }
            key={index}
            onClick={() => handleTabClick(index)}
          >
            {item}
          </div>
        ))}
    </Tab>
  );
};

Tabs.themeUpdate = function(params: any) {
  return {
    activeBg: params.primaryColor,
    titleStyle: { background: params.secondColor },
  };
};

export default Tabs;