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

interface AudioSeekBarProps {
  value: number;
  full_range: number;
}

const MyProgressBar: FunctionComponent<AudioSeekBarProps> = ({ value, full_range }) => {
  let test_value = value;

  let first_scale_full_range = 10;
  let first_scale = test_value > first_scale_full_range ? first_scale_full_range : test_value;
  //
  let second_scale_full_range = 50;
  let second_scale_range = second_scale_full_range - first_scale_full_range;
  let second_scale =
    test_value >= second_scale_full_range ? second_scale_full_range : Math.max(0, test_value - first_scale_full_range);

  let third_scale_full_range = 100;
  let third_scale_range = third_scale_full_range - second_scale_full_range;
  let third_scale =
    test_value >= third_scale_full_range ? third_scale_full_range : Math.max(0, test_value - second_scale_full_range);
  let forth_scale_full_range = 300;
  let forth_scale_range = forth_scale_full_range - third_scale_full_range;
  let forth_scale =
    test_value >= forth_scale_full_range ? forth_scale_full_range : Math.max(0, test_value - third_scale_full_range);
  let fifth_scale_full_range = 700;
  let fifth_scale_range = fifth_scale_full_range - forth_scale_full_range;
  let fifth_scale =
    test_value >= fifth_scale_full_range ? fifth_scale_full_range : Math.max(0, test_value - forth_scale_full_range);

  let sixth_scale_full_range = 1000;
  let sixth_scale_range = sixth_scale_full_range - fifth_scale_full_range;
  let sixth_scale =
    test_value >= sixth_scale_full_range ? sixth_scale_full_range : Math.max(0, test_value - fifth_scale_full_range);

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div style={{ width: 'calc( 100% / 6 )', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{ fontSize: '0.5rem' }}>{first_scale_full_range}</div>
          <div className={`audioSeekBar playBar_t__seek`}>
            <div style={{ width: `${(first_scale / first_scale_full_range) * 100}%` }} className='audioSeekBar__tick' />
          </div>
        </div>

        <div style={{ width: 'calc( 100% / 6 )', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{ fontSize: '0.5rem' }}>{second_scale_full_range}</div>
          <div className={`audioSeekBar playBar_t__seek`}>
            <div style={{ width: `${(second_scale / second_scale_range) * 100}%` }} className='audioSeekBar__tick' />
          </div>
        </div>

        <div style={{ width: 'calc( 100% / 6 )', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{ fontSize: '0.5rem' }}>{third_scale_full_range}</div>
          <div className={`audioSeekBar playBar_t__seek`}>
            <div style={{ width: `${(third_scale / third_scale_range) * 100}%` }} className='audioSeekBar__tick' />
          </div>
        </div>

        <div style={{ width: 'calc( 100% / 6 )', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{ fontSize: '0.5rem' }}>{forth_scale_full_range}</div>
          <div className={`audioSeekBar playBar_t__seek`}>
            <div style={{ width: `${(forth_scale / forth_scale_range) * 100}%` }} className='audioSeekBar__tick' />
          </div>
        </div>

        <div style={{ width: 'calc( 100% / 6 )', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{ fontSize: '0.5rem' }}>{fifth_scale_full_range}</div>
          <div className={`audioSeekBar playBar_t__seek`}>
            <div style={{ width: `${(fifth_scale / fifth_scale_range) * 100}%` }} className='audioSeekBar__tick' />
          </div>
        </div>

        <div style={{ width: 'calc( 100% / 6 )', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
          <div style={{ fontSize: '0.5rem' }}>{sixth_scale_full_range}</div>
          <div className={`audioSeekBar playBar_t__seek`}>
            <div style={{ width: `${(sixth_scale / sixth_scale_range) * 100}%` }} className='audioSeekBar__tick' />
          </div>
        </div>
      </div>
    </>
  );
};

export default MyProgressBar;
