import React, { useEffect, useRef, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Observable } from 'rxjs';
import styled from 'styled-components';
import { InfiniteScroll } from '.';
import { CreateRange } from '../../../services';

const css = styled.div;

const Style = css`
   .scroll {
      height: 400px;
      width: 400px;
      overflow: scroll;
      background: #222;
      margin: 20px;
   }

   .row {
      background: crimson;
      padding: 10px 20px;
      border: 10px;
      margin: 10px;
      color: white;
   }
`;

storiesOf('Components/InfiniteScroll', module)
   .add('scroll bottom', () => {
      const [items, setItems] = useState(CreateRange(10));

      const addMoreItems = (): void => {
         setItems([...items, ...CreateRange(10)]);
      };

      return (
         <Style className="m-4">
            <InfiniteScroll className="scroll" scrolledDown={addMoreItems}>
               {items &&
                  items.map((el, i) => (
                     <div className="row" key={i}>
                        Item {i}
                     </div>
                  ))}
            </InfiniteScroll>
         </Style>
      );
   })
   .add('scroll top', () => {
      const [items, setItems] = useState(CreateRange(10));

      const scrollRef = useRef<HTMLDivElement>();

      const addMoreItems = (): void => {
         setItems([...items, ...CreateRange(10)]);
      };

      useEffect(() => {
         scrollRef.current.scrollTo({ top: 400 });
      }, [items]);

      useEffect(() => {
         scrollRef.current.scrollTo({ top: 3000 });
      }, []);

      return (
         <Style className="m-4">
            <InfiniteScroll ref={scrollRef} className="scroll" scrolledUp={addMoreItems}>
               {items &&
                  items.map((el, i) => (
                     <div className="row" key={i}>
                        Item {items.length - i}
                     </div>
                  ))}
            </InfiniteScroll>
         </Style>
      );
   });
