import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { createGroups, getRandomInt } from '../../helpers/storybook';
import { SvgElement } from '../VisualElements/SvgElement';
import { LandingPageTiles } from './LandingPageTiles';
import { LandingPageItem } from './LandingPageTiles.model';

const defaultContainer = {
  width: '100%',
  display: 'grid',
  gridTemplateColumns: '1fr',
  paddingTop: '30px',
  paddingBottom: '30px',
} as React.CSSProperties;

const DefaultIcon: React.FC = () => {
  return (
    <SvgElement viewBox="0 0 40 40">
      <path
        vectorEffect="non-scaling-stroke"
        fill="none"
        strokeWidth="2"
        d="M39,39H1V1h38V39z M39.1,26l-8.4-8.7l-9.1,11.5
	l-6.4-5.4L3.6,39.1 M12.8,7.8c-2.4,0-4.4,2-4.4,4.4s2,4.4,4.4,4.4s4.4-2,4.4-4.4S15.3,7.8,12.8,7.8z"
      />
    </SvgElement>
  );
};

const largeTiles: LandingPageItem[] = [
  {
    path: '/contentset',
    label: 'Content Sets',
    icon: <DefaultIcon />,
    type: 'large',
    subtitle: 3,
  },
  {
    path: '/movies',
    label: 'Movies(Disabled)',
    icon: <DefaultIcon />,
    type: 'large',
    subtitle: '68',
    disabled: true,
  },
  {
    path: '/tvshows',
    label: 'TV Shows',
    icon: <DefaultIcon />,
    type: 'large',
    subtitle: '4198',
  },
];

const smallTiles: LandingPageItem[] = [
  {
    path: '/contentpipelines',
    label: 'Content Pipelines(Disabled)',
    icon: <DefaultIcon />,
    type: 'small',
    disabled: true,
  },
  {
    path: '/reporting',
    label: 'Reporting',
    icon: <DefaultIcon />,
    type: 'small',
  },
  {
    path: '/subscriptions',
    label: 'Subscriptions',
    icon: <DefaultIcon />,
    type: 'small',
  },
  {
    path: '/administration',
    label: 'Administration',
    icon: <DefaultIcon />,
    type: 'small',
  },
  {
    path: '/customers',
    label: 'Customers',
    icon: <DefaultIcon />,
    type: 'small',
  },
  {
    path: '/images',
    label: 'Images',
    icon: <DefaultIcon />,
    type: 'small',
  },
  {
    path: '/collections',
    label: 'Collections',
    icon: <DefaultIcon />,
    type: 'small',
  },
  {
    path: '/localizations',
    label: 'Localizations',
    icon: <DefaultIcon />,
    type: 'small',
  },
];

const groups = createGroups({
  Content: ['items', 'children'],
  Styling: [
    'gridTemplateColumns',
    'gridRowHeight',
    'gridGap',
    'minWidth',
    'maxWidth',
    'alignment',
    'largeTileColumnSpan',
    'largeTileRowSpan',
    'smallTileColumnSpan',
    'smallTileRowSpan',
    'className',
  ],
});

const meta: Meta<typeof LandingPageTiles> = {
  title: 'Other Components/LandingPageTiles',
  component: LandingPageTiles,
  argTypes: {
    ...groups,
    children: {
      ...groups.children,
      control: false,
    },
    items: {
      ...groups.items,
      control: false,
    },
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <div style={defaultContainer}>
        <MemoryRouter>
          <Story />
        </MemoryRouter>
      </div>
    ),
  ],
};
export default meta;

export const ThreeByFour: StoryObj<typeof LandingPageTiles> = {
  args: {
    items: [...largeTiles, ...smallTiles],
  },
};

export const FourByFour: StoryObj<typeof LandingPageTiles> = {
  args: {
    items: [
      ...largeTiles,
      {
        path: '/liveevents',
        label: 'LIVE EVENTS',
        icon: <DefaultIcon />,
        type: 'large',
        subtitle: '528',
      },
      ...smallTiles,
    ],
    gridTemplateColumns: 4,
    gridRowHeight: '75px',
    gridGap: '5px',
    minWidth: '600px',
    maxWidth: '900px',
    alignment: 'center',
    largeTileColumnSpan: 1,
    largeTileRowSpan: 3,
    smallTileColumnSpan: 1,
    smallTileRowSpan: 2,
  },
};

export const FlowingTiles: StoryObj<typeof LandingPageTiles> = {
  args: {
    items: [...largeTiles, ...smallTiles],
    gridTemplateColumns: 12,
    gridRowHeight: '150px',
    gridGap: '5px',
    minWidth: '600px',
    maxWidth: '900px',
    alignment: 'center',
    largeTileColumnSpan: 6,
    largeTileRowSpan: 2,
    smallTileColumnSpan: 3,
    smallTileRowSpan: 1,
  },
};

const CustomElement: React.FC = () => {
  const analyticsStyles = {
    fontSize: '22px',
    textAlign: 'center',
    margin: '10px',
  } as React.CSSProperties;

  const statsStyles = {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
  } as React.CSSProperties;

  const titleStyles = {
    textAlign: 'center',
  } as React.CSSProperties;

  const titles = ['Movies', 'Albums', 'Games', 'Tv Shows'];
  const stats = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];

  return (
    <>
      <span style={analyticsStyles}>Analytics - Top Consumed</span>
      <div style={statsStyles}>
        {titles.map((t) => (
          <div key={t} style={titleStyles}>
            <span>{t}</span>
            <ol>
              {stats.map((l) => (
                <li key={l}>{l}</li>
              ))}
            </ol>
          </div>
        ))}
      </div>
    </>
  );
};

const customElementStyles = {
  display: 'grid',
  gridTemplateRows: 'min-content 1fr',
  gridColumn: '-1 / 7',

  gridRow: '3 / span 2',
  backgroundColor: 'white',
  color: '#444',
} as React.CSSProperties;

export const WithCustomElement: StoryObj<typeof LandingPageTiles> = {
  args: {
    items: [...largeTiles, ...smallTiles],
    children: (
      <div style={customElementStyles}>
        <CustomElement />
      </div>
    ),
  },
};

const subtitleLoadingFunction = (duration = 5000) => {
  return () =>
    new Promise<string>((resolve) =>
      setTimeout(() => {
        resolve(String(duration));
      }, duration),
    );
};
export const AsyncSubtitles: StoryObj<typeof LandingPageTiles> = {
  args: {
    items: [
      ...largeTiles.map((t) => ({
        ...t,
        subtitle: subtitleLoadingFunction(getRandomInt(1000, 5000)),
      })),
      ...smallTiles,
    ],
  },
};
