/** @format */

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

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

interface TabStyleProps {
  ordinary: {
    hoverBg: string;
    hoverStyle: {
      fontFamily: string;
      fontSize: string;
      color: string;
      fontWeight: string;
    };
  };
  select: {
    selectedBg: string;
    selectedStyle: {
      fontFamily: string;
      fontSize: string;
      color: string;
      fontWeight: string;
    };
  };
}

const Tab = styled.div<TabStyleProps>`
  display: flex;
  justify-content: space-between;
  .tabItem {
    font-size: 14px;
    color: #fff;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      width: 20px;
      height: 20px;
    }
    &:hover {
      background: ${props => props.ordinary.hoverBg} !important;
      font-size: ${props => props.ordinary.hoverStyle.fontSize}px !important;
      font-family: ${props => props.ordinary.hoverStyle.fontFamily} !important;
      font-weight: ${props => props.ordinary.hoverStyle.fontWeight} !important;
      color: ${props => props.ordinary.hoverStyle.color} !important;
    }
  }

  .active {
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: var(--positionT);
      left: 0;
      right: 0;
      margin: auto;
      width: var(--width);
      height: var(--height);
      background: var(--color);
      border-radius: var(--radius);
    }
    &:hover {
      background: ${props => props.select.selectedBg} !important;
      font-size: ${props => props.select.selectedStyle.fontSize}px !important;
      font-family: ${props => props.select.selectedStyle.fontFamily} !important;
      font-weight: ${props => props.select.selectedStyle.fontWeight} !important;
      color: ${props => props.select.selectedStyle.color} !important;
    }
  }
  .active2 {
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: var(--positionL);
      top: 0;
      bottom: 0;
      margin: auto;
      width: var(--height);
      height: var(--width);
      background: var(--color);
      border-radius: var(--radius);
    }
    &:hover {
      background: ${props => props.select.selectedBg} !important;
      font-size: ${props => props.select.selectedStyle.fontSize}px !important;
      font-family: ${props => props.select.selectedStyle.fontFamily} !important;
      font-weight: ${props => props.select.selectedStyle.fontWeight} !important;
      color: ${props => props.select.selectedStyle.color} !important;
    }
  }
`;

let timer: number | null = null;

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

const CommonTabs = (props: CommonCommonTabsProps) => {
  const { id, size, data = [], global, ordinary, select } = props;
  const styleBase = {
    height: 34,
    flexDirection: global.direction === '水平方向' ? 'row' : 'column',
    background: global.background,
  };
  const style = _.merge(styleBase, size);

  const baseTabStyle = {
    width: global.direction === '水平方向' ? global.width : 'auto',
    height: global.direction === '垂直方向' ? global.width : 'auto',
    borderRadius: global.radius,
    flexDirection:
      global.picStyle.position === 'top' ||
      global.picStyle.position === 'bottom'
        ? 'column'
        : 'row',
    justifyContent:
      global.textAlign === '居左'
        ? 'flex-start'
        : global.textAlign === '居中'
        ? 'center'
        : 'flex-end',
    background: ordinary.bg,
    '--color': global.underLineStyle.bg,
    '--height': global.underLineStyle.height + 'px',
    '--width': global.underLineStyle.width + 'px',
    '--radius': global.underLineStyle.radius + 'px',
    '--positionT':
      global.underLineStyle.positionT === '下方'
        ? '0px'
        : size.height - global.underLineStyle.height + 'px',
    '--positionL':
      global.underLineStyle.positionL === '左侧'
        ? '0px'
        : size.width - global.underLineStyle.height + 'px',
  };

  const baseTabStyles = _.merge({}, baseTabStyle, ordinary.textStyle);

  const activeStyle = {
    background: select.bg,
  };
  const activeStyles = _.merge({}, baseTabStyle, activeStyle, select.textStyle);

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

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

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

  useEffect(() => {
    setActive(global.activeIndex);
  }, [global.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].content) || '',
      });
    }
  }, [id, active, data]);

  function handleTabClick(index: number, item: any) {
    setActive(index);
    setRefreshKey(Math.random());
    if (item && item.url) {
      if (item.new) {
        window.open(`${item.url}`);
        return;
      }
      window.location.href = item.url;
    }
  }

  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)}
      select={select}
      ordinary={ordinary}
    >
      {data &&
        typeof data.map === 'function' &&
        data.map((item: Record<string, any>, index: number) => (
          <div
            style={active === index ? activeStyles : baseTabStyles}
            className={
              active === index
                ? global.showUnderLine
                  ? global.direction === '水平方向'
                    ? 'active tabItem '
                    : 'active2 tabItem'
                  : 'tabItem'
                : ' tabItem '
            }
            key={index}
            onClick={() => handleTabClick(index, item)}
          >
            {item.imgSrc &&
            (global.picStyle.position === 'left' ||
              global.picStyle.position === 'top') ? (
              <img
                src={item.imgSrc}
                style={{
                  width: global.picStyle.width,
                  height: global.picStyle.height,
                  marginRight:
                    global.picStyle.position === 'left'
                      ? global.picStyle.margin
                      : 0,
                  marginLeft:
                    global.picStyle.position === 'right'
                      ? global.picStyle.margin
                      : 0,
                  marginBottom:
                    global.picStyle.position === 'top'
                      ? global.picStyle.margin
                      : 0,
                }}
              />
            ) : null}
            <p>{item.content}</p>
            {item.imgSrc &&
            (global.picStyle.position === 'right' ||
              global.picStyle.position === 'bottom') ? (
              <img
                src={item.imgSrc}
                style={{
                  width: global.picStyle.width,
                  height: global.picStyle.height,
                  marginLeft:
                    global.picStyle.position === 'right'
                      ? global.picStyle.margin
                      : 0,
                  marginTop:
                    global.picStyle.position === 'bottom'
                      ? global.picStyle.margin
                      : 0,
                }}
              />
            ) : null}
          </div>
        ))}
    </Tab>
  );
};

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

export default CommonTabs;