import React, { useEffect, useContext, useState } from "react";
import { Animated } from 'react-native';
import Svg, { Circle } from 'react-native-svg';
import { ThemeContext } from 'context/context';
import { keysFamily, keysTheme, theme } from 'data/dataMx';
import { IFontWeight, ISetup } from 'interfaces';
import { Container, TimeSpan } from './styles';
import moment from 'moment';

export interface IContDownProps {
  /** Size of the container */
  size: number;
  /** Data time to start countdown */
  dataStart: string;
  /** Data time to finish countdown */
  dataFinish: string;
  /** Stroke color of the container */
  strokeColor: keysTheme;
  /** Stroke width of the container */
  strokeWidth: number;
  /** Stroke color of the container */
  strokeBgColor: keysTheme;
  /** Callback to be called when finish countdown */
  onFinish: Function;
  /**Font family */
  family?: keysFamily;
}

export const AtomCountDown = ({
  size,
  dataStart,
  dataFinish,
  onFinish,
  strokeColor,
  strokeBgColor,
  strokeWidth = 4,
  family = 'regular',
}: IContDownProps) => {
  const [timeStampStart] = useState<number>(new Date(dataStart).getTime());
  const [timeStampFinish] = useState<number>(new Date(dataFinish).getTime());

  const [circumference] = useState(size * Math.PI);
  const [radius] = useState(size / 2 - strokeWidth / 2);
  const [formatTimer, setFormatTimer] = useState<any>('00:00');
  const [millisecondsLoader] = useState<any>(timeStampFinish - timeStampStart);
  const [timeDuration, setTimeDuration] = useState<any>(
    timeStampFinish - timeStampStart,
  );
  const [timeDurationCopy, setTimeDurationCopy] = useState<any>(
    timeStampFinish - timeStampStart,
  );
  const [startCount, setStartCount] = useState<boolean>(false);

  const { fontFamily } = useContext<ISetup>(ThemeContext);
  const font: string = fontFamily.main[family as keyof IFontWeight];
  const fontWeight: number = fontFamily.weight[font as keyof typeof fontFamily.weight];

  let duration = moment.duration(timeDuration, 'milliseconds');
  const interval = 1000;
  const intervalLoader = 116.6 * ((timeStampFinish - timeStampStart) / 10000);

  const strokeDashoffset = () => {
    let offset =
      formatTimer !== '00:00' ?
        (timeDurationCopy / millisecondsLoader) * circumference - circumference : circumference;

    return offset >= circumference ? circumference : offset;
  };

  useEffect(() => {
    let timerLoader: NodeJS.Timeout;

    if (timeDurationCopy >= 0) {
      if (startCount) {
        timerLoader = setTimeout(() => {
          setTimeDurationCopy(timeDurationCopy - intervalLoader);
        }, 10);
      }

      return () => {
        clearTimeout(timerLoader);
      };
    } else {
      timeDuration >= 0 &&
        setTimeDurationCopy(timeStampFinish - timeStampStart);
    }
  }, [timeDurationCopy, startCount]);

  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (timeStampFinish) {
      if (timeDuration >= 0) {
        timer = setTimeout(() => {
          duration = moment.duration(timeDuration, 'milliseconds');
          setTimeDuration(timeDuration - interval);
          setFormatTimer(moment(duration.asMilliseconds()).format('mm:ss'));
          setStartCount(true);
        }, 1000);
      } else {
        onFinish();
        setStartCount(false);
      }
    }

    return () => {
      clearTimeout(timer);
    };
  }, [timeDuration]);

  return (
    <>
      <Container size={`${size}px`}>
        <TimeSpan fontWeight={fontWeight} fontSize={`${size * 0.3}px`} font={font}>
          {formatTimer}
        </TimeSpan>

        <Animated.View style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          position: 'absolute',
          overflow: 'visible',
          transform: [{ rotate: '270deg' }]
        }}>
          <Svg
            width="100%"
            height="100%"
            style={{
              position: 'absolute',
              overflow: 'visible',
            }}
          >
            <Circle
              cx={size / 2}
              cy={size / 2}
              r={radius}
              fill="none"
              stroke={theme[strokeBgColor]}
              strokeWidth={strokeWidth}
            ></Circle>
          </Svg>
        </Animated.View>

        <Animated.View style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          position: 'absolute',
          overflow: 'visible',
          transform: [{ rotate: '270deg' }]
        }}>
          <Svg
            width="100%"
            height="100%"
            style={{
              position: 'absolute',
              overflow: 'visible',
            }}
          >
            <Circle
              strokeDasharray={circumference}
              strokeDashoffset={strokeDashoffset()}
              r={radius}
              cx={size / 2}
              cy={size / 2}
              fill="none"
              strokeLinecap="round"
              stroke={theme[strokeColor]}
              strokeWidth={strokeWidth}
            ></Circle>
          </Svg>
        </Animated.View>
      </Container>
    </>
  )
}