import React from 'react';

import { ExpandableEmbeddedList } from '../src';

export default {
  title: 'EmbedListExpandable',
  component: ExpandableEmbeddedList,
  parameters: {
    layout: 'fullscreen',
    backgrounds: {
      default: 'App',
      values: [{ name: 'App', value: '#F2F4F8' }],
    },
  },
};

const HEADERS = [
  {
    id: 0,
    name: 'Catégorie',
    propertyKey: 'category',
    large: true,
    bold: true,
    textTransform: 'uppercase',
    textDecorationChild: 'underline',
    hrefPrefix: '/admin/product/',
    hrefSuffix: '/details',
    render: (item) => {
      return <div>{item} with render</div>;
    },
    isSortable: true,
  },
  {
    id: 1,
    name: 'Mix Produit',
    propertyKey: 'mix',
    tooltipDisplay:
      'Part de la catégorie dans le CA TTC journalier. Part du CA TTC par produit dans la catégorie parente.',
    isNumber: true,
    unit: '€',
    bold: true,
    customModalRender: true,
    customModalTooltip: 'Afficher les données de stocks',
    isSortable: true,
  },
  {
    id: 2,
    name: "Nombre d'unités",
    propertyKey: 'unit',
    isNumber: true,
    withRender: true,
    graphConfiguration: {
      title: 'Unités vendues les 5 derniers mercredis',
      subTitle: 'Moyenne:',
    },
    isSortable: true,
  },
  {
    id: 3,
    name: 'Prix TTC',
    propertyKey: 'price',
    tooltipDisplay: 'Prix de vente moyen tenant compte des produits offerts.',
    unit: '€',
    isNumber: true,
    isSortable: true,
  },
  {
    id: 4,
    name: 'CA TTC généré',
    propertyKey: 'ca',
    unit: '€',
    isNumber: true,
    isSortable: true,
  },
  {
    id: 5,
    name: 'Marge',
    propertyKey: 'margin',
    tooltipDisplay:
      'Par catégorie: moyenne des marges matières par produit. Marge matière par produit = 1 - (coût matière HT / prix HT)',
    unit: '%',
    type: 'percentage',
    isNumber: true,
    isSortable: true,
  },
  {
    id: 6,
    name: '',
    propertyKey: 'action',
    isClickable: true,
  },
];

const Template = (args) => <ExpandableEmbeddedList {...args} />;

export const LoadingState = Template.bind({});
LoadingState.args = {
  headers: HEADERS,
  data: [],
  isLoading: true,
};

export const Primary = Template.bind({});
Primary.args = {
  headers: HEADERS,
  data: [
    {
      isHighlighted: true,
      parentItem: {
        items: {
          margin: 32.528090201681035,
          mix: 70637.07,
          category: 'Coucou',
          price: 14.780821917808223,
          ca: 12000,
          unit: 7.958439261633697,
          modalOpened: false,
          modalContent: () => {
            return <div>Salut les loulou !</div>;
          },
        },
      },
    },
    {
      parentItem: {
        items: {
          margin: 61.688090201681035,
          mix: 34.97720449238298,
          category: 'bowl',
          price: 8.617808219178082,
          ca: 630,
          unit: 4.324439261633697,
          modalContent: () => {
            return <div>Salut les loulou !</div>;
          },
          opened: false,
          graphOpened: false,
          modalOpened: false,
          isExpandable: true,
        },
        chart: [
          { x: 'mercredi 08/06', y: 36 },
          { x: 'mercredi 07/06', y: 53 },
          { x: 'mercredi 06/06', y: 48 },
          { x: 'mercredi 05/06', y: 38 },
          { x: 'mercredi 04/06', y: 0 },
          { x: 'mercredi 04/06', y: 53 },
        ],
      },
      childItems: [
        {
          items: {
            id: '56649411-d324-4fce-8ae5-806a58fadd4a',
            margin: 34.63445397794461,
            mix: 12.659068643248484,
            category: 'Acai Bowl',
            price: 15.9,
            unit: 5.23244,
            ca: 10.618439261633697,
            graphOpened: false,
            modalOpened: false,
            modalContent: () => {
              return <div>Salut les child !</div>;
            },
          },
          chart: [],
        },
        {
          items: {
            id: '56649411-d36d-4fce-8ae5-806a58fadd4a',
            margin: 53.63445397794461,
            mix: 24.659068643248484,
            category: 'sushi Bowl',
            price: 15.9,
            unit: 12.23244,
            ca: 9.618439261633697,
            graphOpened: false,
            modalOpened: false,
            modalContent: () => {
              return <div>Salut les child !</div>;
            },
          },
          chart: [
            { x: 'mercredi 08/06', y: 0 },
            { x: 'mercredi 07/06', y: 10 },
            { x: 'mercredi 06/06', y: 20 },
            { x: 'mercredi 05/06', y: 30 },
            { x: 'mercredi 04/06', y: 40 },
          ],
        },
      ],
    },
    {
      parentItem: {
        items: {
          margin: 43.168090201681035,
          mix: 12.32720449238298,
          category: 'Poisson',
          price: 3.217808219178082,
          ca: 710,
          unit: 9.268439261633697,
          opened: false,
          graphOpened: false,
          modalOpened: false,
          modalContent: () => {
            return <div>Salut les loulou !</div>;
          },
          isExpandable: true,
        },
        chart: [
          { x: 'mercredi 08/06', y: 36 },
          { x: 'mercredi 07/06', y: 53 },
          { x: 'mercredi 06/06', y: 48 },
          { x: 'mercredi 05/06', y: 38 },
          { x: 'mercredi 04/06', y: 3 },
          { x: 'mercredi 02/06', y: 53 },
        ],
      },
      childItems: [
        {
          items: {
            id: '56649411-156d-4fce-8ae5-806a58fadd4a',
            margin: 18.63445397794461,
            mix: 21.659068643248484,
            category: 'Saumon',
            price: 8.9,
            unit: 28.23244,
            ca: 14.618439261633697,
            graphOpened: false,
            modalOpened: false,
            modalContent: () => {
              return <div>Salut les child !</div>;
            },
          },
          chart: [
            { x: 'mercredi 08/06', y: 0 },
            { x: 'mercredi 07/06', y: 10 },
            { x: 'mercredi 06/06', y: 20 },
            { x: 'mercredi 05/06', y: 30 },
            { x: 'mercredi 04/06', y: 40 },
          ],
        },
        {
          items: {
            id: '56ze9411-156d-4fce-8sg5-806a58fadd4a',
            margin: 63.63445397794461,
            mix: 76.659068643248484,
            category: 'daurade',
            price: 18.9,
            unit: 7.23244,
            ca: 32.618439261633697,
            graphOpened: false,
            modalOpened: false,
            modalContent: () => {
              return <div>Salut les child !</div>;
            },
          },
        },
      ],
    },
  ],
  isLoading: false,
  customModalIcon: 'icon-stock',
  defaultOrderBy: 0,
  defaultOrderType: 'asc',
  height: 'calc(100vh - 60px)',
};