import React from 'react';

import Button from '@leafygreen-ui/button';
import { css, cx } from '@leafygreen-ui/emotion';
import LeafygreenProvider from '@leafygreen-ui/leafygreen-provider';
import { StoryMetaType, Theme } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';

import {
  ActiveNavElement,
  Environment,
  Mode,
  MongoNavInterface,
  Platform,
  Product,
} from './types';
import MongoNav from '.';

const storybookStyles = css`
  position: absolute;
  top: 0;
  width: 100%;
  margin: 0;
`;

const baseStyles = css`
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
`;

const themeStyles = {
  [Theme.Light]: css`
    background: ${palette.white};
  `,
  [Theme.Dark]: css`
    background: ${palette.black};
  `,
};

const meta: StoryMetaType<typeof MongoNav> = {
  title: 'MongoNav',
  component: MongoNav,
  parameters: {
    default: 'LiveExample',
  },
  args: {
    mode: Mode.Dev,
  },
  argTypes: {
    darkMode: {
      control: 'boolean',
    },
    mode: {
      control: 'select',
      options: Object.values(Mode),
    },
    activePlatform: {
      control: 'select',
      options: Object.values(Platform),
      defaultValue: Platform.University,
    },
    activeProduct: {
      control: 'select',
      options: Object.values(Product),
      defaultValue: Product.Cloud,
    },
    activeNav: {
      control: 'select',
      options: Object.values(ActiveNavElement),
      defaultValue: ActiveNavElement.OrgNavAccessManagerDropdown,
    },
    admin: {
      control: 'boolean',
      defaultValue: true,
    },
    onPrem: {
      control: 'boolean',
      defaultValue: true,
    },
    loadData: {
      control: 'boolean',
    },
    showProjectNav: {
      control: 'boolean',
    },
    useAppServicesBranding: {
      control: 'boolean',
    },
    showUnifiedAccessManagementNav: {
      control: 'boolean',
    },
    environment: {
      control: 'select',
      options: Object.values(Environment),
      defaultValue: Environment.Commercial,
    },
    orgName: {
      control: 'text',
      name: 'dataFixtures.currentOrganization.orgName',
      defaultValue: 'LeafyCorp',
    },
    useCNRegionsOnly: {
      control: 'boolean',
      name: 'dataFixtures.currentProject.useCNRegionsOnly',
      defaultValue: false,
    },
    planType: {
      control: 'select',
      name: 'dataFixtures.currentProject.planType',
      options: ['atlas', 'cloud'],
      defaultValue: 'atlas',
    },
    hasLegacy2fa: {
      control: 'boolean',
      name: 'dataFixtures.account.hasLegacy2fa',
      defaultValue: true,
    },
    shouldSeeAccountMfaBanner: {
      control: 'boolean',
      name: 'dataFixtures.account.shouldSeeAccountMfaBanner',
      defaultValue: true,
    },
  },
};
export default meta;

interface LiveExampleProps extends MongoNavInterface {
  onPremEnabled: boolean;
  orgName: string;
  useCNRegionsOnly: boolean;
  planType: 'cloud' | 'atlas' | 'onprem';
  hasLegacy2fa: boolean;
  shouldSeeAccountMfaBanner: boolean;
}

export const LiveExample = ({
  darkMode,
  onPremEnabled,
  orgName,
  useCNRegionsOnly,
  planType,
  hasLegacy2fa,
  shouldSeeAccountMfaBanner,
  ...props
}: LiveExampleProps) => {
  const mongoNavRef = React.useRef<{ reloadData: () => void }>(null);

  const [triggerDataReload, setTriggerDataReload] = React.useState(false);

  // button('trigger dataReload', );

  React.useEffect(() => {
    if (triggerDataReload) {
      mongoNavRef?.current?.reloadData?.();
    }
  }, [triggerDataReload]);

  return (
    <div
      className={cx(
        baseStyles,
        themeStyles[darkMode ? Theme.Dark : Theme.Light],
      )}
    >
      <Button onClick={() => setTriggerDataReload(curr => !curr)}></Button>
      <LeafygreenProvider darkMode={darkMode}>
        <div className={storybookStyles}>
          <MongoNav
            ref={mongoNavRef}
            {...props}
            /* eslint-disable-next-line no-console */
            onElementClick={(a, b) => console.log(a, b)}
            onPrem={{
              mfa: true,
              version: '4.4.0',
              enabled: onPremEnabled,
            }}
            dataFixtures={{
              currentOrganization: {
                orgName,
              },
              currentProject: {
                useCNRegionsOnly,
                planType,
              },
              account: {
                hasLegacy2fa,
                shouldSeeAccountMfaBanner,
              },
            }}
            darkMode={darkMode}
          />
        </div>
      </LeafygreenProvider>
    </div>
  );
};