import { StoryObj } from '@storybook/react'
import LoadMore from './LoadMore.component'
import { ILoadMore } from './LoadMore.interface'
import React, { useState } from 'react'
import Button from '../../atoms/Button/Button.component'

export default {
  title: 'BackLog/LoadMore',
  component: LoadMore,
  args: {
    currentPage: 10,
    numberPages: 25
  }
}

export const Dark: StoryObj<ILoadMore> = {
  render: args => {
    const [currentPage, setCurrentPage] = useState(args.currentPage)
    const [numberPages, setNumberPages] = useState(args.numberPages)

    const handleOnClick = () => {
      if (currentPage + 1 <= numberPages) setCurrentPage(prev => prev + 1)
    }
    return (
      <div style={{ backgroundColor: '#333' }}>
        <LoadMore
          theme="dark"
          numberPages={numberPages}
          currentPage={currentPage}
          onClick={handleOnClick}
        >
          <Button
            variant={'primary'}
            theme={'dark'}
            size={'small'}
            onClick={handleOnClick}
          >
            SHOW MORE
          </Button>
        </LoadMore>
      </div>
    )
  }
}
export const Light: StoryObj<ILoadMore> = {
  render: args => {
    const [currentPage, setCurrentPage] = useState(args.currentPage)
    const [numberPages, setNumberPages] = useState(args.numberPages)

    const handleOnClick = () => {
      if (currentPage + 1 <= numberPages) setCurrentPage(prev => prev + 1)
    }
    return (
      <LoadMore
        theme="light"
        numberPages={numberPages}
        currentPage={currentPage}
        onClick={handleOnClick}
      >
        <Button
          variant={'primary'}
          theme={'light'}
          size={'small'}
          onClick={handleOnClick}
        >
          SHOW MORE
        </Button>
      </LoadMore>
    )
  }
}