import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { SvgElement } from '../VisualElements/SvgElement';
import { Hub } from './Hub';
import { HubItem } from './Hub.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 items: HubItem[] = [
  {
    groupName: 'Video Service',
    path: '/video/acquisition',
    label: 'Transcoding: Acquisition',
    icon: <DefaultIcon />,
  },
  {
    groupName: 'Video Service',
    path: '/video/processing',
    label: 'Transcoding: Processing',
    icon: <DefaultIcon />,
  },
  {
    groupName: 'Video Service',
    path: '/video/processing',
    label: 'Transcoding: Publishing',
    icon: <DefaultIcon />,
  },
  {
    groupName: 'Media Service',
    path: '/media/tvgenres',
    label: 'Movie Genres',
    icon: <DefaultIcon />,
  },
  {
    groupName: 'Media Service',
    path: '/media/tvgenres',
    label: 'TV Show Genres',
    icon: <DefaultIcon />,
  },
  {
    groupName: 'Identity & Access',
    path: '/id/users',
    label: 'User Accounts',
    icon: <DefaultIcon />,
  },
  {
    groupName: 'Identity & Access',
    path: '/id/roles',
    label: 'User Roles',
    icon: <DefaultIcon />,
  },
  {
    groupName: 'Identity & Access',
    path: '/id/tags',
    label: 'User Role Tags',
    icon: <DefaultIcon />,
  },
  {
    groupName: 'Identity & Access',
    path: '/id/service',
    label: 'Service Accounts',
    icon: <DefaultIcon />,
  },
];

const meta: Meta<typeof Hub> = {
  title: 'Other Components/Hub',
  component: Hub,
  argTypes: {
    items: {
      control: false,
    },
  },
};
export default meta;

export const Default: StoryObj<typeof Hub> = {
  args: {
    items,
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <div style={defaultContainer}>
        <MemoryRouter>
          <Story />
        </MemoryRouter>
      </div>
    ),
  ],
};
