import React, { FunctionComponent } from 'react';
import './style.css';

interface AudioSeekBarProps {
  value: number;
  range_list: number[];
}

const ConnectivesConquerorProgressBar: FunctionComponent<AudioSeekBarProps> = ({ value, range_list }) => {
  let test_value = value;
  let scale = [];

  for (let i = 0; i < range_list.length; i++) {
    let scale_full_range = range_list[i];
    let scale_range = i > 0 ? scale_full_range - range_list[i - 1] : scale_full_range;

    let fill = 0;
    if (test_value > scale_full_range) {
      fill = scale_full_range;
    } else {
      if (i > 0) {
        fill = Math.max(0, test_value - range_list[i - 1]);
      } else {
        fill = test_value;
      }
    }
    let fill_pct = Math.min(fill / scale_range, 1);
    scale.push([fill_pct]);
  }

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        {scale.map((item: any, index: number) => {
          return (
            <div
              style={{
                width: `calc( 100% / ${range_list.length} )`,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'flex-end'
              }}
            >
              <div style={{ fontSize: '0.5rem' }}>{range_list[index]}</div>
              <div
                className={`audioSeekBar playBar_t__seek`}
                style={{
                  // border: '1px solid #000',
                  borderTop: '1px solid #000',
                  borderBottom: '1px solid #000',
                  borderLeft: index == 0 ? '1px solid #000' : '',
                  borderRight: index == scale.length - 1 ? '1px solid #000' : '',
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'flex-start'
                }}
              >
                <div style={{ width: `${item * 100}%` }} className='audioSeekBar__tick' />
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default ConnectivesConquerorProgressBar;
