import type { Meta, StoryObj } from '@storybook/react';
import dayjs from 'dayjs';
import '../../ThemeProvider/tailwindcss.css';

import { ClickAwayListener } from '@mui/material';

import { useState } from 'react';

import type { LineChartData } from '../common/models';
import dataPingService from '../mockedData/pingService.json';
import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
import dataPingServiceStackeKey from '../mockedData/pingServiceWithStackedKeys.json';
import BarChart from './BarChart';

const meta: Meta<typeof BarChart> = {
  component: BarChart
};
export default meta;

type Story = StoryObj<typeof BarChart>;

const defaultStart = new Date(
  dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
).toISOString();

const defaultEnd = new Date(Date.now()).toISOString();

const defaultArgs = {
  end: defaultEnd,
  height: 500,
  loading: false,
  start: defaultStart
};

const Template = (args): JSX.Element => (
  <BarChart data={dataPingService as unknown as LineChartData} {...args} />
);

export const Default: Story = {
  args: defaultArgs,
  render: Template
};

export const withCenteredZero: Story = {
  args: {
    ...defaultArgs,
    axis: {
      isCenteredZero: true
    },
    legend: {
      mode: 'grid',
      placement: 'bottom',
      showCalculations: { avg: true, max: false, min: false }
    }
  },
  render: Template
};

export const vertical: Story = {
  args: {
    ...defaultArgs,
    height: 800,
    orientation: 'vertical'
  },
  render: Template
};

export const verticalCenteredZero: Story = {
  args: {
    ...defaultArgs,
    axis: {
      isCenteredZero: true
    },
    height: 800,
    orientation: 'vertical'
  },
  render: Template
};

export const stacked: Story = {
  args: {
    ...defaultArgs,
    data: dataPingServiceStacked
  },
  render: Template
};

export const stackedVertical: Story = {
  args: {
    ...defaultArgs,
    data: dataPingServiceStacked,
    height: 800,
    orientation: 'vertical'
  },
  render: Template
};

export const stackedCenteredZero: Story = {
  args: {
    ...defaultArgs,
    axis: {
      isCenteredZero: true
    },
    data: dataPingServiceStacked
  },
  render: Template
};

export const stackedVerticalCenteredZero: Story = {
  args: {
    ...defaultArgs,
    axis: {
      isCenteredZero: true
    },
    data: dataPingServiceStacked,
    height: 800,
    orientation: 'vertical'
  },
  render: Template
};

export const thresholds: Story = {
  args: {
    ...defaultArgs,
    thresholds: {
      critical: [
        {
          label: 'critical 1',
          value: 0.1
        }
      ],
      enabled: true,
      warning: [
        {
          label: 'warning 1',
          value: 0.05
        }
      ]
    },
    thresholdUnit: 'ms'
  },
  render: Template
};

export const thresholdsVertical: Story = {
  args: {
    ...defaultArgs,
    axis: {
      isCenteredZero: true
    },
    orientation: 'vertical',
    thresholds: {
      critical: [
        {
          label: 'critical 1',
          value: 0.1
        }
      ],
      enabled: true,
      warning: [
        {
          label: 'warning 1',
          value: 0.05
        }
      ]
    },
    thresholdUnit: 'ms'
  },
  render: Template
};

export const thresholdStacked: Story = {
  args: {
    ...defaultArgs,
    data: dataPingServiceStacked,
    thresholds: {
      critical: [
        {
          label: 'critical 1',
          value: 0.1
        }
      ],
      enabled: true,
      warning: [
        {
          label: 'warning 1',
          value: 0.05
        }
      ]
    },
    thresholdUnit: 'ms'
  },
  render: Template
};

export const customBarStyle: Story = {
  args: {
    ...defaultArgs,
    barStyle: {
      opacity: 0.5,
      radius: 0.5
    }
  },
  render: Template
};

export const customBarStyleForABar: Story = {
  args: {
    ...defaultArgs,
    barStyle: [
      {
        metricId: 10,
        opacity: 0.5,
        radius: 0.5
      },
      {
        metricId: 1,
        opacity: 0.2,
        radius: 0.3
      }
    ]
  },
  render: Template
};

export const customBarStyleForABarStacked: Story = {
  args: {
    ...defaultArgs,
    barStyle: [
      {
        metricId: 10,
        opacity: 0.5,
        radius: 0.5
      },
      {
        metricId: 1,
        opacity: 0.2,
        radius: 0.3
      }
    ],
    data: dataPingServiceStacked
  },
  render: Template
};

export const mixedStacked: Story = {
  args: {
    ...defaultArgs,
    data: dataPingServiceMixedStacked
  },
  render: Template
};

export const mixedStackedVertical: Story = {
  args: {
    ...defaultArgs,
    data: dataPingServiceMixedStacked,
    orientation: 'vertical'
  },
  render: Template
};

export const mixedStackedMinMax: Story = {
  args: {
    ...defaultArgs,
    data: dataPingServiceMixedStacked,
    max: 20,
    min: 10
  },
  render: Template
};

const LegendSecondaryClick = (args) => {
  const [position, setPosition] = useState<Array<[number, number]> | null>(
    null
  );

  return (
    <>
      <Template
        {...args}
        legend={{
          secondaryClick: ({ position }) => setPosition(position)
        }}
      />
      {position && (
        <ClickAwayListener onClickAway={() => setPosition(null)}>
          <div
            className="absolute py-1 px-2 rounded-sm bg-background-widget shadow-md"
            onClose={() => setPosition(null)}
            open={Boolean(position)}
            style={{ left: position?.[0], top: position?.[1] }}
          >
            menu
          </div>
        </ClickAwayListener>
      )}
    </>
  );
};

export const withLegendSecondaryClick: Story = {
  args: defaultArgs,
  render: (args) => (
    <LegendSecondaryClick
      {...args}
      data={dataPingService as unknown as LineChartData}
    />
  )
};

export const stackKey: Story = {
  args: {
    ...defaultArgs,
    data: dataPingServiceStackeKey
  },
  render: Template
};

export const withControlledCalculations: Story = {
  args: {
    ...defaultArgs,
    legend: {
      mode: 'grid',
      placement: 'bottom',
      showCalculations: { avg: true, max: false, min: false }
    }
  },
  render: Template
};