/** @format */

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

const Outer = styled.div`
  background: rgba(56, 68, 102, 0.6);
  height: 6px;
  width: 100%;
  position: relative;
`;
const Inner = styled.div`
  background: rgb(0, 206, 151);
  height: 100%;
`;

const Text = styled.div`
  text-align: right;
`;

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

const Progress = (props: ProgressProps) => {
  const {
    size,
    textStyle,
    count = 20,
    totalCount = 100,
    outerBg = 'rgba(56, 68, 102, 0.6)',
    innerBg = 'rgb(0, 206, 151)',
    data = [],
  } = props;

  const [currentCount, setCurrentCount] = useState(getCurrentData().count);
  const [currentTotalCount, setCurrentTotalCount] = useState(
    getCurrentData().totalCount,
  );

  function getCurrentData() {
    const dataSourceCount =
      data && data.length ? data[0] && data[0].count : null;
    const dataSourceTotalCount =
      data && data.length ? data[0] && data[0].totalCount : null;

    const _count =
      typeof dataSourceCount !== 'undefined' && dataSourceCount !== null
        ? dataSourceCount
        : count;
    const _totalCount =
      typeof dataSourceTotalCount !== 'undefined' &&
      dataSourceTotalCount !== null
        ? dataSourceTotalCount
        : totalCount;

    return {
      count: _count,
      totalCount: _totalCount,
    };
  }

  useEffect(() => {
    const { count, totalCount } = getCurrentData();
    setCurrentCount(count);
    setCurrentTotalCount(totalCount);
  }, [count, totalCount, data]);

  const styleBase = {
    height: 44,
    width: 120,
    fontSize: 14,
    color: '#999',
  };

  const style = _.merge(styleBase, size);

  return (
    <div style={style}>
      <Text style={textStyle}>
        {currentCount + '/' + currentTotalCount || count + '/' + totalCount}
      </Text>
      <Outer style={{ background: outerBg }}>
        <Inner
          style={{
            width: `${~~(
              (currentCount / currentTotalCount) * 100 ||
              (count / totalCount) * 100
            )}%`,
            background: innerBg,
          }}
        ></Inner>
      </Outer>
    </div>
  );
};

Progress.themeUpdate = function(params: any) {
  return {
    outerBg: params.primaryColor,
    innerBg: params.thirdColor,
  };
};

export default Progress;