import { storiesOf } from '@storybook/react';
import React, { useEffect, useState } from 'react';
import { NestedList } from '../src';
import { numberToFixed } from '../src/utils/format';

storiesOf('NestedListPaginated', module).add('PaginatedWithNestedData', () => {
  const headers = [
    {
      id: 0,
      name: 'Categorie',
      propertyKey: 'name',
      large: true,
      isSortable: true,
    },
    {
      id: 1,
      name: 'Mix Produit',
      propertyKey: 'mix',
      large: false,
      render: (item) => numberToFixed(item, 2, '-', '%'),
    },
    {
      id: 2,
      name: 'Quantité',
      propertyKey: 'quantity',
      large: false,
    },
    {
      id: 3,
      name: 'Prix TTC',
      propertyKey: 'price',
      large: false,
      render: (item) => numberToFixed(item, 2, '-', '%'),
    },
    {
      id: 4,
      name: 'Marge',
      propertyKey: 'margin',
      large: false,
      render: (item) => numberToFixed(item, 2, '-', '%'),
    },
    {
      id: 5,
      name: '',
      propertyKey: 'action',
      isClickable: true,
    },
  ];

  const data = [
    {
      name: 'plat',
      mix: 70,
      quantity: 74,
      price: 4.65,
      nestedData: [
        {
          name: 'KID SIE YAI',
          quantity: 6,
          price: 4.12,
          margin: 86.20938708333333,
          mix: 0.38856805128092275,
          link: '/admin/products/crunch-tuna-id/details',
        },
        {
          name: 'SOUPE TOM YUM CREVETTES',
          quantity: 4,
          price: 11.4575,
          margin: 69.66736226086957,
          mix: 0.720391334555206,
          link: '/admin/products/maki-saumon-id/details',
        },
        {
          name: 'SOUPE TOM YUM SAUMON/CREVETTES',
          quantity: 2,
          price: 12.440000000000001,
          margin: 69.01091881666667,
          mix: 0.3910830548490841,
          link: '/admin/products/crunch-poulet-id/details',
        },
      ],
    },
    {
      name: 'SUSHI',
      mix: 30,
      quantity: 80,
      price: 4,
      nestedData: [
        {
          name: 'Sushi Saumon',
          mix: 50,
          quantity: 40,
          price: 4.0,
        },
        {
          name: 'Sushi Thon',
          mix: 25,
          quantity: 20,
          price: 5.1,
        },
        {
          name: 'Sushi Crevette',
          mix: 12.25,
          quantity: 10,
          price: 3.95,
        },
        {
          name: 'Sushi Anguille',
          mix: 12.25,
          quantity: 10,
          price: 6,
        },
      ],
    },
    {
      name: 'Burger',
      mix: 70,
      quantity: 74,
      price: 4.65,
      nestedData: [
        {
          name: 'Montagnard',
          quantity: 6,
          price: 4.12,
          margin: 86.20938708333333,
          mix: 0.38856805128092275,
          link: '/admin/products/crunch-tuna-id/details',
        },
        {
          name: 'Bacon',
          quantity: 4,
          price: 11.4575,
          margin: 69.66736226086957,
          mix: 0.720391334555206,
          link: '/admin/products/maki-saumon-id/details',
        },
        {
          name: 'Poivre',
          quantity: 2,
          price: 12.440000000000001,
          margin: 69.01091881666667,
          mix: 0.3910830548490841,
          link: '/admin/products/crunch-poulet-id/details',
        },
      ],
    },
    {
      name: 'Pizza',
      mix: 30,
      quantity: 80,
      price: 4,
      nestedData: [
        {
          name: 'Reine',
          mix: 50,
          quantity: 40,
          price: 4.0,
        },
        {
          name: 'Margarita',
          mix: 25,
          quantity: 20,
          price: 5.1,
        },
        {
          name: 'Chorizo',
          mix: 12.25,
          quantity: 10,
          price: 3.95,
        },
        {
          name: '4 saisons',
          mix: 12.25,
          quantity: 10,
          price: 6,
        },
      ],
    },
    {
      name: 'Pâtes',
      mix: 70,
      quantity: 74,
      price: 4.65,
      nestedData: [
        {
          name: 'Jambon fromage',
          quantity: 6,
          price: 4.12,
          margin: 86.20938708333333,
          mix: 0.38856805128092275,
          link: '/admin/products/crunch-tuna-id/details',
        },
        {
          name: 'Ricotta Épinard',
          quantity: 4,
          price: 11.4575,
          margin: 69.66736226086957,
          mix: 0.720391334555206,
          link: '/admin/products/maki-saumon-id/details',
        },
        {
          name: 'Carbonara',
          quantity: 2,
          price: 12.440000000000001,
          margin: 69.01091881666667,
          mix: 0.3910830548490841,
          link: '/admin/products/crunch-poulet-id/details',
        },
      ],
    },
    {
      name: 'Viandes',
      mix: 30,
      quantity: 80,
      price: 4,
      nestedData: [
        {
          name: 'Bavette',
          mix: 50,
          quantity: 40,
          price: 4.0,
        },
        {
          name: 'Faux Filet',
          mix: 25,
          quantity: 20,
          price: 5.1,
        },
        {
          name: 'Entrecôte',
          mix: 12.25,
          quantity: 10,
          price: 3.95,
        },
      ],
    },
    {
      name: 'Poulet',
      mix: 70,
      quantity: 74,
      price: 4.65,
      nestedData: [
        {
          name: 'Blanc',
          quantity: 6,
          price: 4.12,
          margin: 86.20938708333333,
          mix: 0.38856805128092275,
          link: '/admin/products/crunch-tuna-id/details',
        },
        {
          name: 'Ailes',
          quantity: 4,
          price: 11.4575,
          margin: 69.66736226086957,
          mix: 0.720391334555206,
          link: '/admin/products/maki-saumon-id/details',
        },
        {
          name: 'Cuisses',
          quantity: 2,
          price: 12.440000000000001,
          margin: 69.01091881666667,
          mix: 0.3910830548490841,
          link: '/admin/products/crunch-poulet-id/details',
        },
      ],
    },
  ];
  const Parent = ({ children }) => {
    const [currentPage, setCurrentPage] = useState(1);
    const [maxPerPage, setMaxPerPage] = useState(2);
    const [dataToDisplay, setDataToDisplay] = useState(data.slice(0, 2));

    useEffect(() => {
      if (!data && !maxPerPage && currentPage >= 1) {
        return;
      }

      const dataToSkip = maxPerPage * (currentPage - 1);

      setDataToDisplay(data.slice(dataToSkip, dataToSkip + maxPerPage));
    }, [maxPerPage, currentPage]);

    return (
      <div>
        {children(
          currentPage,
          setCurrentPage,
          maxPerPage,
          setMaxPerPage,
          dataToDisplay
        )}
      </div>
    );
  };

  const maxPerPageOptions = [2, 4, 8, 15];

  return (
    <Parent>
      {(
        currentPage,
        setCurrentPage,
        maxPerPage,
        setMaxPerPage,
        dataToDisplay
      ) => (
        <NestedList
          data={dataToDisplay}
          headers={headers}
          maxHeight={'100%'}
          itemsCount={data.length}
          currentPage={currentPage}
          maxPerPage={maxPerPage}
          setMaxPerPage={setMaxPerPage}
          setCurrentPage={setCurrentPage}
          maxPerPageOptions={maxPerPageOptions}
          defaultOrderBy={'name'}
          hasPagination
          hasNestedData
        />
      )}
    </Parent>
  );
});