/* eslint-disable jsx-a11y/control-has-associated-label */
import { useState } from 'react';

import Button from '../../Button';
import PageScroller from '..';
import FirstComponent from './FirstComponent';
import SecondComponent from './SecondComponent';
import ThirdComponent from './ThirdComponent';
import FourthComponent from './FourthComponent';
import FifthComponent from './FifthComponent';

import './index.css';

export default function FullPage() {
  const [current, setCurrent] = useState(0);

  const pageNumbers = [];
  for (let i = 0; i < 5; i++) {
    pageNumbers.push(
      <Button
        key={i}
        variant={i === current ? 'contained' : 'outlined'}
        size="small"
        onClick={() => setCurrent(i)}
        color={i === current ? 'primary' : 'secondary'}>
        {i + 1}
      </Button>
    );
  }

  const progress = (current / (5 - 1)) * 100;

  return (
    <div className="demo-page-contain">
      <h3 className="demo-page-contain__hint">
        You need to focus or hover page scroller to make scroll, keys or touch work
      </h3>
      <div style={{ width: 360, height: 640, position: 'relative' }}>
        <PageScroller onChange={(i) => setCurrent(i)} width={360} height={640} customPageNumber={current}>
          <FirstComponent />
          <SecondComponent />
          <ThirdComponent />
          <FourthComponent />
          <FifthComponent />
        </PageScroller>
        <div
          className="progress"
          role="progressbar"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow={progress}
          aria-valuetext={`Page Scroller Progress: ${progress}`}
          style={{ width: `${progress}%` }}
        />
      </div>
      <div className="pagination-additional-class">{pageNumbers}</div>
    </div>
  );
}
