import React from 'react';
import doc from './doc.mdx?raw';
import { Header } from '@digigov/ui/app/Header';
import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
import { HeaderSecondaryLogo } from '@digigov/ui/app/Header/HeaderSecondaryLogo';
import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
import { HeaderTitle } from '@digigov/ui/app/Header/HeaderTitle';
import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
import minEduLogo from '@digigov/ui/govgr/images/minedu-logo-base64';
import { MoreVertIcon } from '@digigov/ui/icons';

import {
  Dropdown,
  DropdownButton,
  DropdownContent,
} from '@digigov/ui/navigation/Dropdown';
import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';

export default {
  title: 'Digigov UI/app/Header',
  component: Header,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'Header',
  description:
    'You must use the GOV.GR header at the top of every page if your service is being listed in the GOV.GR service catalog.',
  link: 'https://guide.services.gov.gr/docs/components/header',
  defaultWidth: 'lg',
  parameters: {
    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
    layout: 'fullscreen',
  },
};

export const WithControls = {
  render: (args) => {
    return (
      <Header>
        <HeaderContent>
          <HeaderSection>
            <GovGRLogo href="govgr.gr" />
            {args.withSecondaryLogo && (
              <HeaderSecondaryLogo src={minEduLogo} href="#" />
            )}
            {args.withServiceName && (
              <HeaderTitle>{args.serviceNameTitle}</HeaderTitle>
            )}
          </HeaderSection>
          {args.withUser && (
            <Dropdown align="right">
              <DropdownButton variant="link">
                {args.userText}
                <MoreVertIcon size="md" />
              </DropdownButton>
              <DropdownContent>
                <NavList layout="vertical">
                  <NavListItemAction href="#">Ρυθμίσεις</NavListItemAction>
                  <NavListItemAction href="#">Έξοδος</NavListItemAction>
                </NavList>
              </DropdownContent>
            </Dropdown>
          )}
        </HeaderContent>
      </Header>
    );
  },
  args: {
    withSecondaryLogo: false,
    withServiceName: false,
    serviceNameTitle: 'Δηλώσεις',
    withUser: false,
    userText: 'Μάριος Μενεξές',
  },
  argTypes: {
    withSecondaryLogo: {
      control: 'boolean',
    },
    withServiceName: {
      control: 'boolean',
    },
    serviceNameTitle: {
      control: 'text',
      if: {
        arg: 'withServiceName',
        truthy: true,
      },
    },
    withUser: {
      control: 'boolean',
    },
    userText: {
      control: 'text',
      if: {
        arg: 'withUser',
        truthy: true,
      },
    },
  },
};

export { Default } from '@digigov/ui/app/Header/__stories__/Default';
export { WithServiceName } from '@digigov/ui/app/Header/__stories__/WithServiceName';
export { WithServiceNameAndLogo } from '@digigov/ui/app/Header/__stories__/WithServiceNameAndLogo';
export { WithNavigation } from '@digigov/ui/app/Header/__stories__/WithNavigation';
export { WithHeaderNavigation } from '@digigov/ui/app/Header/__stories__/WithHeaderNavigation';