import React from 'react';
import moment from 'moment';
import _ from 'lodash';

import { NestedList, Label, Franco, Button, TimeRangedLineGraph } from '../src';
import { numberToFixed } from '../src/utils/format';

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

const SHORT_PRICE_EVOLUTION_PAYLOAD = [
  {
    orderId: 'cd852ce6-87af-42e8-abcc-3dc60d7acfc0',
    orderDate: '2023-02-01',
    pricePerUnit: 10.0,
    quantity: 2,
    ordered: 20.0,
    unit: 'kg',
  },
  {
    orderId: 'f431e8af-f16c-4009-9a86-cb7b19cf87f2',
    orderDate: '2023-02-02',
    pricePerUnit: 11,
    quantity: 8,
    ordered: 88,
    unit: 'kg',
  },
  {
    orderId: 'f5b64fe0-b969-4066-a238-775bb78ae1a9',
    orderDate: '2023-02-05',
    pricePerUnit: 7.5,
    quantity: 5,
    ordered: 37.5,
    unit: 'kg',
  },
  {
    orderId: '2f94c9a0-f69b-4797-80ac-2408f1f825b8',
    orderDate: '2023-02-06',
    pricePerUnit: 9,
    quantity: 14,
    ordered: 126,
    unit: 'kg',
  },
  {
    orderId: 'a5a5b32c-fbe2-4df1-aaa3-62a84093b330',
    orderDate: '2023-02-07',
    pricePerUnit: 9,
    quantity: 1,
    ordered: 9,
    unit: 'kg',
  },
  {
    orderId: 'd71ebed0-4c90-44ae-addb-3fc41491c827',
    orderDate: '2023-02-10',
    pricePerUnit: 10,
    quantity: 8,
    ordered: 80,
    unit: 'kg',
  },
  {
    orderId: '8700f9fe-93ba-4c53-97cb-2bbfb05d4ac9',
    orderDate: '2023-02-12',
    pricePerUnit: 12.5,
    quantity: 2,
    ordered: 25.0,
    unit: 'kg',
  },
  {
    orderId: 'f4fd353b-5669-45ca-811b-09d86ec9c708',
    orderDate: '2023-02-13',
    pricePerUnit: 10.5,
    quantity: 8,
    ordered: 84,
    unit: 'kg',
  },
];

const HEADERS = [
  {
    id: 0,
    name: 'Nom',
    propertyKey: 'name',
    large: true,
    isSortable: true,
  },
  {
    id: 1,
    name: 'Stock',
    propertyKey: 'stock',
    tooltipDisplay: 'Stock tooltip',
    render: (item, items) => {
      if (item.value == null) {
        return (
          <Label
            children={'--'}
            type={''}
            height={'12px'}
            color={item.isReal ? '#979797' : '#00E7E3'}
            background={item.isReal ? '#979797' : '#00E7E3'}
          />
        );
      }

      return (
        <Label
          children={`${item.value} ${items.unit}`}
          type={''}
          height={'12px'}
          color={item.isReal ? '#979797' : '#00E7E3'}
          background={item.isReal ? '#979797' : '#00E7E3'}
        />
      );
    },
    isSortable: true,
  },
  {
    id: 2,
    name: 'Conso. prév. journ.',
    propertyKey: 'meanForecastedConsumption',
    tooltipDisplay: 'Conso. prév. journ. tooltip',
    isNumber: true,
    render: (item, items) => {
      return (
        <Label
          children={`${item} ${items.unit}`}
          type={''}
          height={'12px'}
          color="#00E7E3"
          background="#00E7E3"
        />
      );
    },
    isSortable: true,
  },
  {
    id: 3,
    name: 'Jours avant rupture',
    propertyKey: 'daysBeforeBreakage',
    tooltipDisplay: 'Jours avant rupture tooltip',
    isNumber: true,
    render: (item) => {
      if (item == null) {
        return '--';
      }
      if (item < 4) {
        return (
          <Label
            children={`${item} jours`}
            type={'plain'}
            height={'12px'}
            color="#222321"
            background="#FFF1D5"
          />
        );
      }
      return `${item} jours`;
    },
    isSortable: true,
  },
  {
    id: 4,
    name: 'Prochaines commandes',
    propertyKey: 'nextOrders',
    tooltipDisplay: 'Prochaines commandes tooltip',
    customModalRender: true,
  },
  {
    id: 5,
    name: '',
    propertyKey: 'action',
    isClickable: true,
  },
];

const MODAL_HEADERS = [
  { propertyKey: 'url' },
  {
    propertyKey: 'status',
    bold: true,
    render: (item) => {
      return (
        <div style={{ color: item === 'Envoyé' ? 'black' : '#606060' }}>
          {item}
        </div>
      );
    },
  },
  { propertyKey: 'supplierName' },
  {
    propertyKey: 'quantity',
    bold: true,
  },
  { propertyKey: 'deliveryDate' },
];

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

export const LoadingState = Template.bind({});
LoadingState['args'] = {
  headers: HEADERS,
  data: [
    {
      entityId: '99999999-4b89-47c5-b79d-d72957ed86a4',
      name: 'Saumon',
      unit: 'kg',
      stock: {
        value: 24.3,
        isReal: true,
      },
      meanForecastedConsumption: 12.15,
      daysBeforeBreakage: 2,
    },
    {
      entityId: '99999998-4b89-47c5-b79d-d72957ed86a4',
      name: 'Avocat',
      unit: 'unit',
      stock: {
        value: undefined,
        isReal: false,
      },
      meanForecastedConsumption: 8,
      daysBeforeBreakage: null,
    },
    {
      entityId: '99999997-4b89-47c5-b79d-d72957ed86a4',
      name: 'Lait',
      unit: 'L',
      stock: {
        value: 42,
        isReal: false,
      },
      meanForecastedConsumption: 8,
      daysBeforeBreakage: 5,
      isHighlighted: true,
    },
  ],
  isLoading: true,
};

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

export const Primary = Template.bind({});
Primary['args'] = {
  headers: HEADERS,
  data: [
    {
      entityId: '99999999-4b89-47c5-b79d-d72957ed86a4',
      name: 'Saumon',
      unit: 'kg',
      stock: {
        value: 24.3,
        isReal: true,
      },
      meanForecastedConsumption: 12.15,
      daysBeforeBreakage: 2,
      modalContent: () => [
        {
          orderId: '99999999-9999-47c5-b79d-d72957ed86a4',
          status: 'Brouillon',
          supplierName: 'Transgourmet',
          quantity: '3 u.',
          deliveryDate: '29/06/2022',
          url: '/order/orders?search=REF_ORDER',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Envoyé',
          supplierName: 'Transgourmet',
          quantity: '5 u.',
          deliveryDate: '30/06/2022',
          url: '/order/orders?search=REF_ORDER',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Brouillon',
          supplierName: 'Transgourmet',
          quantity: '5 u.',
          deliveryDate: '30/06/2022',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Brouillon',
          supplierName: 'Transgourmet',
          quantity: '5 u.',
          deliveryDate: '30/06/2022',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Envoyé',
          supplierName: 'Transgourmet',
          quantity: '5 u.',
          deliveryDate: '30/06/2022',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Envoyé',
          supplierName: 'Transgourmet',
          quantity: '5 u.',
          deliveryDate: '30/06/2022',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Envoyé',
          supplierName: 'Transgourmet',
          quantity: '5 u.',
          deliveryDate: '30/06/2022',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Envoyé',
          supplierName: 'Transgourmet',
          quantity: '5 u.',
          deliveryDate: '30/06/2022',
        },
      ],
      graphContent: () => {
        return {
          data: [
            {
              x: '2022-06-02T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 40.9516,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-03',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-03',
                  totUnit: 19,
                  totTurnover: 10.5146,
                },
                order: {},
              },
            },
            {
              x: '2022-06-03T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 34.8642,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-07-01',
                  totTurnover: 16.16,
                  totUnit: 2,
                },
                consumption: {
                  createdAt: '2022-06-04',
                  totUnit: 11,
                  totTurnover: 6.0874,
                },
                order: {},
              },
            },
            {
              x: '2022-06-04T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 22.135999999999996,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-05',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-05',
                  totUnit: 23,
                  totTurnover: 12.7282,
                },
                order: {},
              },
            },
            {
              x: '2022-06-05T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 15.495199999999995,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-06',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-06',
                  totUnit: 12,
                  totTurnover: 6.6408000000000005,
                },
                order: {},
              },
            },
            {
              x: '2022-06-06T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 8.854399999999995,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-07',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-07',
                  totUnit: 12,
                  totTurnover: 6.6408000000000005,
                },
                order: {},
              },
            },
            {
              x: '2022-06-07T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 66.408,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-08',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-08',
                  totUnit: 16,
                  totTurnover: 8.8544,
                },
                order: {
                  startOrderDate: '2022-06-08',
                  totUnit: 120,
                  totTurnover: 66.408,
                  orderId: '6e1ae660-e633-11ec-bf35-4d7ab8dfca4f',
                  type: 'receive_order',
                },
              },
            },
            {
              x: '2022-06-08T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 52.0196,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-09',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-09',
                  totUnit: 26,
                  totTurnover: 14.3884,
                },
                order: {},
              },
            },
            {
              x: '2022-06-09T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 35.971,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-10',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-10',
                  totUnit: 29,
                  totTurnover: 16.0486,
                },
                order: {},
              },
            },
            {
              x: '2022-06-10T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 23.242799999999995,
                    color: '#00E7E3',
                  },
                  {
                    value: 16.602,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-11',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-11',
                  totUnit: 23,
                  totTurnover: 12.7282,
                },
                order: {},
              },
            },
            {
              x: '2022-06-11T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 2.7669999999999995,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-12',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-12',
                  totUnit: 25,
                  totTurnover: 13.835,
                },
                order: {},
              },
            },
            {
              x: '2022-06-12T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: -1.1068000000000007,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-13',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-13',
                  totUnit: 7,
                  totTurnover: 3.8738,
                },
                order: {},
              },
            },
            {
              x: '2022-06-13T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: -10.514600000000002,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-14',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-14',
                  totUnit: 17,
                  totTurnover: 9.4078,
                },
                order: {},
              },
            },
            {
              x: '2022-06-14T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 90.7576,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-15',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-15',
                  totUnit: 4,
                  totTurnover: 2.2136,
                },
                order: {
                  startOrderDate: '2022-06-15',
                  totUnit: 168,
                  totTurnover: 92.9712,
                  orderId: '81c46840-ea3d-11ec-925a-5ba275214005',
                  type: 'receive_order',
                },
              },
            },
            {
              x: '2022-06-15T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 73.6022,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-16',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-16',
                  totUnit: 31,
                  totTurnover: 17.1554,
                },
                order: {},
              },
            },
            {
              x: '2022-06-16T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 58.107,
                    color: '#00E7E3',
                  },
                  {
                    value: 53.6798,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-17',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-17',
                  totUnit: 28,
                  totTurnover: 15.4952,
                },
                order: {},
              },
            },
            {
              x: '2022-06-17T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 44.272,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-18',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-18',
                  totUnit: 17,
                  totTurnover: 9.4078,
                },
                order: {},
              },
            },
          ],
          configuration: {
            title: 'Stocks théoriques et réels (en kg)',
            tooltiptext:
              'Les stocks sont calculés en quantité de matière nette et comptabilisés le soir après fermeture. Le stock théorique peut être calculé à partir d’un point de stock réel datant d’au maximum 30 jours dans le passé.',
            metric: 'turnover',
            legends: [
              {
                color: '#00E7E3',
                name: 'Stocks théoriques',
                propertyKey: 'theoricalStockTurnover',
              },
              {
                color: '#E2E2E2',
                name: 'Stocks réels',
                propertyKey: 'realStockTurnover',
              },
            ],
          },
          unit: 'u.',
          isLoading: false,
          currentDate: moment(),
          hasNoInventoryStockOfEntity: false,
        };
      },
    },
    {
      entityId: '99999998-4b89-47c5-b79d-d72957ed86a4',
      name: 'Avocat',
      unit: 'unit',
      stock: {
        value: undefined,
        isReal: false,
      },
      meanForecastedConsumption: 8,
      daysBeforeBreakage: null,
      graphContent: () => {
        return {
          data: [
            {
              x: '2022-06-02T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 0,
                    color: '#FA393E',
                    isHighlighted: true,
                  },
                ],
                consumption: {
                  createdAt: '2022-06-03',
                  totUnit: 19,
                  totTurnover: 10.5146,
                },
                order: {},
              },
            },
            {
              x: '2022-06-03T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 20,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-04',
                  totUnit: 11,
                  totTurnover: 6.0874,
                },
                order: {},
              },
            },
            {
              x: '2022-06-04T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 18,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-05',
                  totUnit: 23,
                  totTurnover: 12.7282,
                },
                order: {},
              },
            },
            {
              x: '2022-06-05T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 15,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-06',
                  totUnit: 12,
                  totTurnover: 6.6408000000000005,
                },
                order: {},
              },
            },
            {
              x: '2022-06-06T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 19,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-07',
                  totUnit: 12,
                  totTurnover: 6.6408000000000005,
                },
                order: {},
              },
            },
            {
              x: '2022-06-07T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 22,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-08',
                  totUnit: 16,
                  totTurnover: 8.8544,
                },
                order: {
                  startOrderDate: '2022-06-08',
                  totUnit: 120,
                  totTurnover: 66.408,
                  orderId: '6e1ae660-e633-11ec-bf35-4d7ab8dfca4f',
                  type: 'receive_order',
                },
              },
            },
            {
              x: '2022-06-08T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 23,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-09',
                  totUnit: 26,
                  totTurnover: 14.3884,
                },
                order: {},
              },
            },
            {
              x: '2022-06-09T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 21,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-10',
                  totUnit: 29,
                  totTurnover: 16.0486,
                },
                order: {},
              },
            },
            {
              x: '2022-06-10T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 19,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-11',
                  totUnit: 23,
                  totTurnover: 12.7282,
                },
                order: {},
              },
            },
            {
              x: '2022-06-11T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 18,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-12',
                  totUnit: 25,
                  totTurnover: 13.835,
                },
                order: {},
              },
            },
            {
              x: '2022-06-12T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 21,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-13',
                  totUnit: 7,
                  totTurnover: 3.8738,
                },
                order: {},
              },
            },
            {
              x: '2022-06-13T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 23,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-14',
                  totUnit: 17,
                  totTurnover: 9.4078,
                },
                order: {},
              },
            },
            {
              x: '2022-06-14T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 21,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-15',
                  totUnit: 4,
                  totTurnover: 2.2136,
                },
                order: {
                  startOrderDate: '2022-06-15',
                  totUnit: 168,
                  totTurnover: 92.9712,
                  orderId: '81c46840-ea3d-11ec-925a-5ba275214005',
                  type: 'receive_order',
                },
              },
            },
            {
              x: '2022-06-15T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 11,
                    color: '#05E08E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-16',
                  totUnit: 31,
                  totTurnover: 17.1554,
                },
                order: {},
              },
            },
            {
              x: '2022-06-16T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 0,
                    color: '#FA393E',
                    isHighlighted: true,
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-17',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-17',
                  totUnit: 28,
                  totTurnover: 15.4952,
                },
                order: {},
              },
            },
            {
              x: '2022-06-17T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 0,
                    color: '#FA393E',
                  },
                ],
                consumption: {
                  createdAt: '2022-06-18',
                  totUnit: 17,
                  totTurnover: 9.4078,
                },
                order: {},
              },
            },
          ],
          configuration: {
            title: 'Stocks projetés (en unité)',
            metric: 'unit',
            legends: [
              {
                color: '#05E08E',
                name: 'Stock positif',
                propertyKey: 'theoricalStockTurnover',
              },
              {
                color: '#FA393E',
                name: 'Rupture de stock',
                propertyKey: 'realStockTurnover',
              },
            ],
          },
          unit: 'u.',
          isLoading: false,
          currentDate: moment(),
          hasNoInventoryStockOfEntity: false,
          singleBarGraph: true,
        };
      },
    },
    {
      entityId: '99999997-4b89-47c5-b79d-d72957ed86a4',
      name: 'Lait',
      unit: 'L',
      stock: {
        value: 42,
        isReal: false,
      },
      meanForecastedConsumption: 8,
      daysBeforeBreakage: 5,
      isHighlighted: true,
      modalContent: () => [
        {
          orderId: '99999999-9999-47c5-b79d-d72957ed86a4',
          status: 'Brouillon',
          supplierName: 'Transgourmet',
          quantity: '3 u.',
          deliveryDate: '29/06/2022',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Envoyé',
          supplierName: 'Transgourmet',
          quantity: '5 u.',
          deliveryDate: '30/06/2022',
        },
      ],
      graphContent: () => {
        return {
          data: [],
          configuration: {
            title: '123',
            tooltiptext: '456',
            subtitle: '789',
            metric: '',
            legends: '',
          },
        };
      },
    },
    {
      entityId: '99999999-9fed-11ee-8c90-0242ac120002',
      name: 'Pomme de terre',
      unit: 'kg',
      stock: {
        value: 53.9,
        isReal: true,
      },
      meanForecastedConsumption: 32.18,
      daysBeforeBreakage: 7,
      modalContent: () => [
        {
          orderId: '99999999-9999-47c5-b79d-d72957ed86a4',
          status: 'Brouillon',
          supplierName: 'Transgourmet',
          quantity: '23 u.',
          deliveryDate: '29/06/2022',
          url: '/order/orders?search=REF_ORDER',
        },
        {
          orderId: '99999998-9999-47c5-b79d-d72957ed86a4',
          status: 'Envoyé',
          supplierName: 'Transgourmet',
          quantity: '12 u.',
          deliveryDate: '30/06/2022',
          url: '/order/orders?search=REF_ORDER',
        },
      ],
      graphContent: () => {
        return {
          data: [
            {
              x: '2022-06-02T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 40.9516,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-03',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-03',
                  totUnit: 19,
                  totTurnover: 10.5146,
                },
                order: {},
              },
            },
            {
              x: '2022-06-03T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 34.8642,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-07-01',
                  totTurnover: 16.16,
                  totUnit: 2,
                },
                consumption: {
                  createdAt: '2022-06-04',
                  totUnit: 11,
                  totTurnover: 6.0874,
                },
                order: {},
              },
            },
            {
              x: '2022-06-04T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 22.135999999999996,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-05',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-05',
                  totUnit: 23,
                  totTurnover: 12.7282,
                },
                order: {},
              },
            },
            {
              x: '2022-06-05T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 15.495199999999995,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-06',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-06',
                  totUnit: 12,
                  totTurnover: 6.6408000000000005,
                },
                order: {},
              },
            },
            {
              x: '2022-06-06T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 8.854399999999995,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-07',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-07',
                  totUnit: 12,
                  totTurnover: 6.6408000000000005,
                },
                order: {},
              },
            },
            {
              x: '2022-06-07T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 66.408,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-08',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-08',
                  totUnit: 16,
                  totTurnover: 8.8544,
                },
                order: {
                  startOrderDate: '2022-06-08',
                  totUnit: 120,
                  totTurnover: 66.408,
                  orderId: '6e1ae660-e633-11ec-bf35-4d7ab8dfca4f',
                  type: 'receive_order',
                },
              },
            },
            {
              x: '2022-06-08T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 52.0196,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-09',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-09',
                  totUnit: 26,
                  totTurnover: 14.3884,
                },
                order: {},
              },
            },
            {
              x: '2022-06-09T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 35.971,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-10',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-10',
                  totUnit: 29,
                  totTurnover: 16.0486,
                },
                order: {},
              },
            },
            {
              x: '2022-06-10T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 23.242799999999995,
                    color: '#00E7E3',
                  },
                  {
                    overlappedStocks: [
                      { value: 30, color: '#e81416' },
                      { value: 30, color: '#ffa500' },
                      {
                        value: 30,
                        color: '#faeb36',
                      },
                      {
                        value: 30,
                        color: '#79c314',
                      },
                      {
                        value: 30,
                        color: '#487de7',
                      },
                      {
                        value: 30,
                        color: '#4b369d',
                      },
                      {
                        value: 30,
                        color: '#70369d',
                      },
                    ],
                    value: null,
                    color: null,
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-11',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-11',
                  totUnit: 23,
                  totTurnover: 12.7282,
                },
                order: {},
              },
            },
            {
              x: '2022-06-11T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 2.7669999999999995,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-12',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-12',
                  totUnit: 25,
                  totTurnover: 13.835,
                },
                order: {},
              },
            },
            {
              x: '2022-06-12T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: -1.1068000000000007,
                    color: '#00E7E3',
                  },
                  {
                    overlappedStocks: [
                      { value: 190, color: '#E2E2E2' },
                      { value: 30, color: '#919390' },
                    ],
                    value: null,
                    color: null,
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-13',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-13',
                  totUnit: 7,
                  totTurnover: 3.8738,
                },
                order: {},
              },
            },
            {
              x: '2022-06-13T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: -10.514600000000002,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-14',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-14',
                  totUnit: 17,
                  totTurnover: 9.4078,
                },
                order: {},
              },
            },
            {
              x: '2022-06-14T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 90.7576,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-15',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-15',
                  totUnit: 4,
                  totTurnover: 2.2136,
                },
                order: {
                  startOrderDate: '2022-06-15',
                  totUnit: 168,
                  totTurnover: 92.9712,
                  orderId: '81c46840-ea3d-11ec-925a-5ba275214005',
                  type: 'receive_order',
                },
              },
            },
            {
              x: '2022-06-15T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 73.6022,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-16',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-16',
                  totUnit: 31,
                  totTurnover: 17.1554,
                },
                order: {},
              },
            },
            {
              x: '2022-06-16T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 58.107,
                    color: '#00E7E3',
                  },
                  {
                    value: 53.6798,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-17',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-17',
                  totUnit: 28,
                  totTurnover: 15.4952,
                },
                order: {},
              },
            },
            {
              x: '2022-06-17T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 44.272,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2022-06-18',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2022-06-18',
                  totUnit: 17,
                  totTurnover: 9.4078,
                },
                order: {},
              },
            },
          ],
          configuration: {
            title: 'Stocks théoriques et réels (en kg)',
            tooltiptext:
              'Les stocks sont calculés en quantité de matière nette et comptabilisés le soir après fermeture. Le stock théorique peut être calculé à partir d’un point de stock réel datant d’au maximum 30 jours dans le passé.',
            metric: 'turnover',
            legends: [
              {
                color: '#00E7E3',
                name: 'Stocks théoriques',
                propertyKey: 'theoricalStockTurnover',
              },
              {
                color: '#E2E2E2',
                name: 'Stocks réels d‘ingrédients',
                propertyKey: 'realStockTurnover',
              },
              {
                color: '#919390',
                name: 'Stocks réels via recettes',
                propertyKey: 'realStockTurnover',
              },
              { name: 'Du rouge', color: '#e81416' },
              { name: 'Du orange', color: '#ffa500' },
              {
                name: 'Du jaune',
                color: '#faeb36',
              },
              {
                name: 'Du vert',
                color: '#79c314',
              },
              {
                name: 'Du bleu',
                color: '#487de7',
              },
              {
                name: 'Du indigo',
                color: '#4b369d',
              },
              {
                name: 'Du violet',
                color: '#70369d',
              },
            ],
          },
          unit: 'u.',
          isLoading: false,
          currentDate: moment(),
          hasNoInventoryStockOfEntity: false,
        };
      },
    },
  ],
  isLoading: false,
  customModalIcon: 'icon-order',
  modalTitle: 'Prochaines commandes',
  modalHeaders: MODAL_HEADERS,
  defaultOrderBy: 'daysBeforeBreakage',
  defaultOrderType: 'asc',
  hasChartJs: true,
};

export const NotExpandable = Template.bind({});
NotExpandable['args'] = {
  ...Primary['args'],
  isExpandable: false,
};

export const WithFixedRows = Template.bind({});
WithFixedRows['args'] = {
  ...Primary['args'],
  fixedRowsData: [
    {
      name: 'TOTAL',
      unit: 'kg',
      stock: {
        value: 12345.67,
        isReal: true,
      },
      meanForecastedConsumption: '-',
      daysBeforeBreakage: null,
    },
  ],
};

const customHeaders = [
  {
    id: 0,
    name: 'Nom',
    propertyKey: 'name',
    large: true,
    isSortable: true,
  },
  {
    id: 1,
    name: 'Prix',
    propertyKey: 'price',
    large: true,
    isSortable: true,
  },
  {
    id: 2,
    name: 'Total commandé',
    propertyKey: 'totalOrdered',
    large: true,
    isSortable: true,
  },
  {
    id: 3,
    name: 'Coût total',
    propertyKey: 'totalCost',
    large: true,
    isSortable: true,
  },
  {
    id: 4,
    name: '',
    propertyKey: 'action',
    isClickable: true,
  },
];
export const WithCustomContent = Template.bind({});
WithCustomContent['args'] = {
  headers: customHeaders,
  data: [
    {
      name: 'Saumon (Franco)',
      price: 10,
      totalOrdered: 200,
      totalCost: 2000,
      nestedContent: () => (
        <Franco
          color="infoRed"
          type="plain"
          title="Nested FrancoBox"
          content="Composant NestedContent"
          containLabel={false}
          fullSizeContent={false}
        />
      ),
    },
    {
      name: 'Avocat (graph de stock)',
      price: 15,
      totalOrdered: 100,
      totalCost: 1500,
      graphContent: () => {
        return {
          data: [
            {
              x: '2023-01-01T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 42,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2023-01-01',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2023-01-01',
                  totUnit: 12,
                  totTurnover: 15,
                },
                order: {},
              },
            },
            {
              x: '2023-01-02T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 69,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2023-01-02',
                  totTurnover: 17,
                  totUnit: 2,
                },
                consumption: {
                  createdAt: '2023-01-02',
                  totUnit: 1,
                  totTurnover: 8,
                },
                order: {},
              },
            },
            {
              x: '2022-01-03T22:00:00.000Z',
              y: {
                stock: [
                  {
                    value: 666,
                    color: '#00E7E3',
                  },
                  {
                    value: null,
                    color: '#E2E2E2',
                  },
                ],
                loss: {
                  inventoryDate: '2023-01-03',
                  totUnit: null,
                  totTurnover: null,
                },
                consumption: {
                  createdAt: '2023-01-03',
                  totUnit: 10,
                  totTurnover: 20,
                },
                order: {},
              },
            },
          ],
          configuration: {
            title: 'Stocks théoriques et réels (en kg)',
            tooltiptext:
              'Les stocks sont calculés en quantité de matière nette et comptabilisés le soir après fermeture. Le stock théorique peut être calculé à partir d’un point de stock réel datant d’au maximum 30 jours dans le passé.',
            metric: 'turnover',
            legends: [
              {
                color: '#00E7E3',
                name: 'Stocks théoriques',
                propertyKey: 'theoricalStockTurnover',
              },
              {
                color: '#E2E2E2',
                name: 'Stocks réels',
                propertyKey: 'realStockTurnover',
              },
            ],
          },
          unit: 'u.',
          isLoading: false,
          currentDate: moment(),
          hasNoInventoryStockOfEntity: false,
        };
      },
    },
    {
      name: 'Steak (Button)',
      price: 30,
      totalOrdered: 2,
      totalCost: 60,
      nestedContent: () => <Button label={'Button'} />,
    },
  ],
};

const nestedDataHeaders = [
  {
    id: 0,
    name: 'Categorie',
    propertyKey: 'name',
    large: true,
    isSortable: true,
  },
  {
    id: 1,
    name: 'Mix Produit',
    propertyKey: 'mix',
    large: false,
    isSortable: true,
    render: (item) => numberToFixed(item, 2, '-', '%'),
  },
  {
    id: 2,
    name: 'Quantité',
    propertyKey: 'quantity',
    large: false,
    isSortable: true,
  },
  {
    id: 3,
    name: 'Prix TTC',
    propertyKey: 'price',
    large: false,
    isSortable: true,
    render: (item) => numberToFixed(item, 2, '-', '%'),
  },
  {
    id: 4,
    name: 'Marge',
    propertyKey: 'margin',
    large: false,
    isSortable: true,
    render: (item) => numberToFixed(item, 2, '-', '%'),
  },
  {
    id: 5,
    name: '',
    propertyKey: 'action',
    isClickable: true,
  },
];
//? Notes: The columns alignment in the storybook is not correct, but it is in the app.
export const withNestedData = Template.bind({});
withNestedData['args'] = {
  headers: nestedDataHeaders,
  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,
        },
      ],
    },
  ],
  hasNestedData: true,
};

export const withNestedDataAndPagination = Template.bind({});
withNestedDataAndPagination['args'] = {
  headers: nestedDataHeaders,
  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',
        },
      ],
    },
  ],
  hasNestedData: true,
  hasPagination: true,
};

const renderGapPercentage = (value) => {
  if (value == null) {
    return '--';
  }

  const formattedValue = value.toFixed(2);

  let gapValue = `${formattedValue} %`;

  if (Math.abs(value) >= 20) {
    return (
      <Label
        background={'#FFF1D4'}
        children={gapValue}
        color={'#000000'}
        type={'plain'}
        useNestedListRowFont={true}
      />
    );
  }

  return gapValue;
};

const customSort = (data, orderType, customSortProperty) => {
  const notNullValues = data.filter((stock) => !!stock[customSortProperty]);
  const nullValues = data.filter((stock) => stock[customSortProperty] === null);
  const absoluteSortedNotNullValues = _.orderBy(
    notNullValues,
    [(item) => Math.abs(item[customSortProperty])],
    [orderType]
  );
  const alphaSortNullValues = _.orderBy(
    nullValues,
    (item) => item.name.toLowerCase(),
    ['asc']
  );

  return absoluteSortedNotNullValues.concat(alphaSortNullValues);
};

const sortHeaders = [
  {
    id: 0,
    name: 'Nom',
    propertyKey: 'name',
    large: true,
    isSortable: true,
  },
  {
    id: 2,
    name: 'Valeur',
    propertyKey: 'value',
    large: true,
    isSortable: true,
    render: (value) => renderGapPercentage(value),
  },
];
export const Sorting = Template.bind({});
Sorting['args'] = {
  headers: sortHeaders,
  data: [
    {
      name: 'PLAT',
      value: null,
    },
    {
      name: 'SUSHI',
      value: 190,
    },
    {
      name: 'Burger',
      value: 60,
    },
    {
      name: 'Pizza',
      value: -50,
    },
    {
      name: 'Pâtes',
      value: null,
    },
    {
      name: 'Viandes',
      value: 1,
    },
    {
      name: 'Poulet',
      value: -10,
    },
  ],
  defaultOrderType: 'desc',
  defaultOrderBy: 'value',
  useAbsolute: true,
  customSortProperty: 'value',
  customSortFunc: customSort,
};

export const WithCustomChart = Template.bind({});
WithCustomChart['args'] = {
  headers: customHeaders,
  data: [
    {
      name: 'Steak (Chart)',
      price: 30,
      totalOrdered: 2,
      totalCost: 60,
      nestedContent: () => (
        <TimeRangedLineGraph
          title="Short TimeRanged Line Graph from 2023/01/30 to 2023/02/15"
          legend="Graph on nestedList"
          rawData={SHORT_PRICE_EVOLUTION_PAYLOAD}
          startDate="2023-01-30"
          endDate="2023-02-15"
          yAxisPropertyKey="pricePerUnit"
          xAxisPropertyKey="orderDate"
          chartName="test"
        />
      ),
    },
  ],
};