import React from 'react';
import doc from './doc.mdx?raw';
import {
  Footer,
  FooterContainer,
  FooterInfo,
  FooterInfoSection,
  FooterContent,
  FooterNavigation,
  FooterNavigationSection,
  FooterHeading,
  FooterList,
  FooterListItem,
  FooterLink,
  FooterContentLogos,
  FooterImage,
} from '@digigov/ui/app/Footer';
import Copyright from '@digigov/ui/govgr/Footer/Copyright';
import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
import govgrBlueLogo from '@digigov/ui/govgr/images/govgr-logo-blue-base64';
import mineduBlackLogo from '@digigov/ui/govgr/images/minedu-logo-black-base64';
import SectionBreak from '@digigov/ui/layouts/SectionBreak';
import Link from '@digigov/ui/navigation/Link';
import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';

export default {
  title: 'Digigov UI/app/Footer',
  description:
    'The footer provides copyright, licensing and other information about your service and department.',
  link: 'https://guide.services.gov.gr/docs/components/footer',
  defaultWidth: 'lg',
  component: Footer,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'Footer',
};

export const WithControls = {
  render: (args) => {
    return (
      <Footer>
        <FooterContainer>
          {args.withSecondaryNav && (
            <>
              <FooterNavigation>
                <FooterNavigationSection aria-label="footer navigation section">
                  <FooterHeading>Επιλογές</FooterHeading>
                  <FooterList columns={2}>
                    <FooterListItem>
                      <FooterLink href="#">Υπηρεσίες</FooterLink>
                    </FooterListItem>
                    <FooterListItem>
                      <FooterLink href="#">Φορείς</FooterLink>
                    </FooterListItem>
                    <FooterListItem>
                      <FooterLink href="#">Αρχές</FooterLink>
                    </FooterListItem>
                    <FooterListItem>
                      <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
                    </FooterListItem>
                    <FooterListItem>
                      <FooterLink href="#">Όροι χρήσης</FooterLink>
                    </FooterListItem>
                    <FooterListItem>
                      <FooterLink href="#">Ιδιωτικό απόρρητο</FooterLink>
                    </FooterListItem>
                  </FooterList>
                </FooterNavigationSection>
                <FooterNavigationSection aria-label="footer navigation section">
                  <FooterHeading>Εξωτερικές Υπηρεσίες</FooterHeading>
                  <FooterList>
                    <FooterListItem>
                      <FooterLink href="#">ΕΜΔΔ - ΜΙΤΟΣ</FooterLink>
                    </FooterListItem>
                    <FooterListItem>
                      <FooterLink href="#">EUGO</FooterLink>
                    </FooterListItem>
                  </FooterList>
                </FooterNavigationSection>
              </FooterNavigation>
              <SectionBreak visible={false} size="md" />
            </>
          )}
          <FooterInfo>
            <FooterInfoSection grow aria-label="footer info section">
              <FooterContent>
                {args.withHorizontalNav && (
                  <>
                    <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
                    <FooterList layout="horizontal">
                      <FooterListItem>
                        <FooterLink href="#">Όροι και Προϋποθέσεις</FooterLink>
                      </FooterListItem>
                      <FooterListItem>
                        <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
                      </FooterListItem>
                    </FooterList>
                  </>
                )}
                {args.withExtraLogos && (
                  <FooterContentLogos>
                    <FooterImage src={govgrBlueLogo} />
                    <FooterImage src={mineduBlackLogo} />
                  </FooterContentLogos>
                )}
                {args.withExtraText && (
                  <Copyright>
                    Η άντληση των απαραίτητων στοιχείων πραγματοποιείται μέσω
                    του{' '}
                    <Link href="https://gsis.gr/dimosia-dioikisi/ked">
                      Κέντρου Διαλειτουργικότητας
                    </Link>{' '}
                    της{' '}
                    <Link href="https://www.gsis.gr/">
                      Γενικής Γραμματείας Πληροφοριακών Συστημάτων Δημόσιας
                      Διοίκησης
                    </Link>
                    .
                  </Copyright>
                )}
                <Copyright>
                  {`Υλοποίηση από το `}
                  <Link href="https://grnet.gr/" target="_blank">
                    ΕΔΥΤΕ
                    <VisuallyHidden>
                      {` (ανοίγει σε καινούρια καρτέλα)`}
                    </VisuallyHidden>
                  </Link>
                  {` για το `}
                  <Link href="https://mindigital.gr/" target="_blank">
                    Υπουργείο Ψηφιακής Διακυβέρνησης
                    <VisuallyHidden>
                      {` (ανοίγει σε καινούρια καρτέλα)`}
                    </VisuallyHidden>
                  </Link>
                  {` και για το `}
                  <Link href="https://www.minedu.gov.gr/" target="_blank">
                    Υπουργείο Παιδείας και Θρησκευμάτων
                    <VisuallyHidden>
                      {` (ανοίγει σε καινούρια καρτέλα)`}
                    </VisuallyHidden>
                  </Link>
                </Copyright>
              </FooterContent>
            </FooterInfoSection>
            <FooterInfoSection>
              <HellenicRepublicLogo />
            </FooterInfoSection>
          </FooterInfo>
        </FooterContainer>
      </Footer>
    );
  },
  args: {
    withSecondaryNav: false,
    withHorizontalNav: false,
    withExtraLogos: false,
    withExtraText: false,
  },
  argTypes: {
    withSecondaryNav: {
      control: { type: 'boolean' },
    },
    withHorizontalNav: {
      control: { type: 'boolean' },
    },
    withExtraLogos: {
      control: { type: 'boolean' },
    },
    withExtraText: {
      control: { type: 'boolean' },
    },
  },
};
export { Default } from '@digigov/ui/app/Footer/__stories__/Default';
export { FooterWithLogo } from '@digigov/ui/app/Footer/__stories__/FooterWithLogo';
export { FooterWithLink } from '@digigov/ui/app/Footer/__stories__/FooterWithLink';
export { DefaultCopyright } from '@digigov/ui/app/Footer/__stories__/DefaultCopyright';
export { FooterWithSecondaryNavigation } from '@digigov/ui/app/Footer/__stories__/FooterWithSecondaryNavigation';
export { FooterWithText } from '@digigov/ui/app/Footer/__stories__/FooterWithText';
export { FooterAllInclusive } from '@digigov/ui/app/Footer/__stories__/FooterAllInclusive';
export { YearCopyright } from '@digigov/ui/app/Footer/__stories__/YearCopyright';