import makeStyles from '@mui/styles/makeStyles';
import { Args, ArgTypes, Meta, Story } from '@storybook/react';
import noop from 'lodash/noop';
import { useState, useEffect } from 'react';
import type { MenuContentProps } from '../dropdown-menu';
import type { Theme } from '../@styles/theme-provider';
import type { SidebarProps } from './sidebar';
import { Sidebar } from './sidebar';
import sidebarItemsMap, {
  mockClientsData,
  sidebarItemsWithDecoratorsMap
} from './__mocks__/mockSidebar';
import { action } from '@storybook/addon-actions';

const LOGO_SRC = 'https://i.pinimg.com/originals/e5/a9/e8/e5a9e877bcacdc5713d2a8f98412762d.png';

const CLOSED_LOGO_SRC =
  'https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80';

const args: SidebarProps = {
  logo: <img alt="logo" src={LOGO_SRC} width="40px" height="40px" />,
  closedLogo: <img alt="logo" src={CLOSED_LOGO_SRC} width="40px" height="40px" />,
  sidebarItemsMap,
  drawerWidthClose: '64px',
  drawerWidthOpen: '240px',
  setOpen: noop,
  showDrawerButton: true,
  open: 'open',
  hideHeader: false
};

const argTypes: Partial<ArgTypes<Args>> = {
  logo: {
    description:
      "Logo which will be displayed at the top of the component when open and when `closedLogo` ins't provided."
  },
  closedLogo: {
    description: 'Logo which will be displayed at the top of the component when closed.'
  },
  sidebarItemsMap: {
    description: 'Menu items to display.'
  },
  drawerWidthOpen: {
    description: 'The drawer width for large screens.'
  },
  drawerWidthClose: {
    description: 'The drawer width for small screens.'
  },
  open: {
    description: 'The open state of the drawer.',
    options: ['open', 'closed', 'locked'],
    control: {
      type: 'select'
    },
    table: {
      defaultValue: {
        summary: 'closed'
      }
    }
  },
  setOpen: {
    description: 'Set the open state of the drawer.'
  },
  showDrawerButton: {
    description: 'Whether to show sidebar button or not.',
    table: {
      defaultValue: {
        summary: true
      }
    }
  },
  classes: {
    description: 'Provide to override classes.'
  },
  hideHeader: {
    description:
      "If true, the client is running inside CP's infinity portal and header and logo will not be visible.",
    table: {
      defaultValue: {
        summary: false
      }
    }
  }
};

export default {
  component: Sidebar,
  title: 'Layout/Navigation',
  args,
  argTypes
} as Meta;

const createClasses = makeStyles<Theme>(() => ({
  rootWrap: {
    width: '100%',
    maxWidth: '65vw',
    minHeight: '100vh',
    display: 'flex',
    justifyContent: 'space-around',
    flexWrap: 'wrap',
    boxSizing: 'border-box'
  },
  subRootWrap: {
    width: '50%',
    maxWidth: '50vw',
    minHeight: '100vh',
    display: 'flex',
    flexWrap: 'wrap',
    boxSizing: 'border-box'
  }
}));

const Template: Story<SidebarProps> = ({ open: _open = 'closed', setOpen: _setOpen, ...rest }) => {
  const classes = createClasses();
  const [open, setOpen] = useState(_open);

  useEffect(() => {
    setOpen(_open);
  }, [_open]);

  return <Sidebar open={open} setOpen={setOpen} {...rest} classes={classes} />;
};

export const Open = Template.bind({});

export const WithSeparatorsAndTitles = Template.bind({});
WithSeparatorsAndTitles.args = {
  ...args,
  sidebarItemsMap: sidebarItemsWithDecoratorsMap
};

export const WithMSP = Template.bind({});
WithMSP.args = {
  ...args,
  mspClientPicker: {
    isMSP: true,
    props: {
      createNewOrg: () => true,
      onClientClick: action('client click') as MenuContentProps['handleClick'],
      bottomBtnText: 'Add a New Organization',
      orgList: mockClientsData,
      selectValue: ''
    }
  }
};