import React from 'react';
import { Story } from '@storybook/react';

import { TimeRangedLineGraph } from '../src';
import { TimeRangedLineGraphProps } from '../src/TimeRangedLineGraph/interfaces';

export default {
  title: 'TimeRangedLineGraph',
  component: TimeRangedLineGraph,
  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',
  },
  {
    orderId: 'f4fd353b-5669-45ca-811b-09d86ec9c708',
    orderDate: '2023-02-15',
    pricePerUnit: 10.5,
    quantity: 8,
    ordered: 84,
    unit: 'kg',
  },
];

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

export const ShortTimeRangedLineGraph: Story<TimeRangedLineGraphProps> =
  Template.bind({});
ShortTimeRangedLineGraph.args = {
  title: 'Short TimeRanged Line Graph from 2023/01/30 to 2023/02/15',
  rawData: SHORT_PRICE_EVOLUTION_PAYLOAD,
  legend: 'Évolution du prix HT',
  startDate: '2023-01-30',
  endDate: '2023-02-15',
  yAxisPropertyKey: 'pricePerUnit',
  xAxisPropertyKey: 'orderDate',
  tooltipTitlePropertyKey: 'orderDate',
  tooltipMinWidth: '150px',
  chartName: 'stringUsedAsIdForTheChart',
  // Custom function make us able to have dynamic render for tooltip
  renderTooltipHeader: (tooltipEl, title) => {
    const tableHead = document.createElement('thead');

    const tr = document.createElement('tr');

    const th = document.createElement('th');
    const text = document.createTextNode(title);

    th.appendChild(text);
    tr.appendChild(th);
    tableHead.appendChild(tr);

    const tableRoot = tooltipEl.querySelector('table');

    while (tableRoot.firstChild) {
      tableRoot.firstChild.remove();
    }

    tableRoot.appendChild(tableHead);
  },
  renderTooltipBody: (tooltipEl, data) => {
    const tooltipBodyPropertyKey = [
      'pricePerUnit',
      'quantity',
      'unit',
      'ordered',
    ];
    const tableBody = document.createElement('tbody');

    tooltipBodyPropertyKey.forEach((property) => {
      const tr = document.createElement('tr');
      tr.style.backgroundColor = 'inherit';
      tr.style.borderWidth = '0';

      const td = document.createElement('td');
      td.style.borderWidth = '0';

      const text = document.createTextNode(`${property}: ${data[property]}`);

      td.appendChild(text);
      tr.appendChild(td);
      tableBody.appendChild(tr);
    });

    const tableRoot = tooltipEl.querySelector('table');
    tableRoot.appendChild(tableBody);
  },
};

export const ChartWithEmptyState: Story<TimeRangedLineGraphProps> =
  Template.bind({});
ChartWithEmptyState.args = {
  renderEmptyState: () => (
    <div>Custom function to render empty state in place of the chart</div>
  ),
};