import React, { Fragment, FC, ReactType, ReactNode } from 'react';

import css from './index.module.css';
import DefaultLink, { LinkProps } from '../../blocks/Link';
import CountrySwitcher, { CountrySwitcherProps } from '../CountrySwitcher';
import LanguageSwitcher, { LanguageSwitcherProps } from '../LanguageSwitcher';
import Content from '../Content';
import TwitterSVG from '../../assets/icons/social/twitter.svg';
import FacebookSVG from '../../assets/icons/social/facebook.svg';
import LinkedinSVG from '../../assets/icons/social/linkedin.svg';
import XingSVG from '../../assets/icons/social/xing.svg';
import InstagramSVG from '../../assets/icons/social/instagram.svg';
import { MilaGridColumn, MilaGridVoid } from '../../index';

export interface FooterProps {
  navigationItems: {
    name: string;
    items: {}[];
  }[];
  socialNavigation: {
    items: {
      Link: ReactType;
      LinkProps: LinkProps;
    }[];
  };
  contactNavigation: {
    name: string;
    items: {
      Link: ReactType;
      LinkProps: LinkProps;
    }[];
  };
  CountrySwitcherProps: CountrySwitcherProps;
  LanguageSwitcherProps: LanguageSwitcherProps;
  children?: ReactNode;
}

export interface NavigationItemProps {
  Link: ReactType;
  LinkProps: LinkProps;
  info?: [];
  hideInPartnerPages?: boolean;
}

export const NavigationItem: FC<NavigationItemProps> = ({
  Link,
  LinkProps,
  info,
}) => {
  return (
    <li className={css.footer__navigationListItem}>
      <Link
        {...LinkProps}
        className={css.footer__navigationLink}
        activeClassName={css.footer__navigationLinkActive}
      />
      <br />
      {info && (
        <>
          <span className={css.footer__navigationListItemInfo}>
            {info.map((item, i) => (
              <Fragment key={i}>
                <span>{item}</span>
              </Fragment>
            ))}
          </span>
        </>
      )}
    </li>
  );
};

const Footer: FC<FooterProps> = ({
  navigationItems,
  socialNavigation,
  contactNavigation,
  CountrySwitcherProps,
  LanguageSwitcherProps,
  children,
}) => (
  <footer className={css.footer}>
    <Content>
      <MilaGridVoid>
        <MilaGridColumn
          columns={['sm-12', 'md-10', 'lg-10', 'xl-12', 'xxl-10']}
          offset={['md-1', 'lg-1', 'xl-0', 'xxl-1']}
        >
          <div className={css.footer__wrap}>
            <div className={css.footer__columns}>
              <div className={css.footer__switcher}>
                <div className={css.footer__countrySwitcher}>
                  {CountrySwitcherProps && (
                    <CountrySwitcher {...CountrySwitcherProps} />
                  )}
                </div>
                <div className={css.footer__languageSwitcher}>
                  {LanguageSwitcherProps && (
                    <LanguageSwitcher {...LanguageSwitcherProps} />
                  )}
                </div>
              </div>

              {navigationItems &&
                navigationItems.map((item, i) => (
                  <div className={css.footer__column} key={i}>
                    <input
                      className={css.footer__accordionInput}
                      type="checkbox"
                      id={item.name + 'Footer'}
                      defaultChecked={false}
                    />
                    <label
                      htmlFor={item.name + 'Footer'}
                      className={css.footer__accordionLabel}
                    >
                      {item.name}
                    </label>
                    <div className={css.footer__accordionContent}>
                      <ul className={css.footer__navigationList}>
                        {item.items &&
                          item.items.map((item: NavigationItemProps, i) =>
                            !item.hideInPartnerPages ? (
                              <NavigationItem
                                key={i}
                                Link={item.Link}
                                LinkProps={item.LinkProps}
                              />
                            ) : null,
                          )}
                      </ul>
                    </div>
                  </div>
                ))}
              {contactNavigation && (
                <div className={css.footer__column} data-hide-accordion="true">
                  <input
                    className={css.footer__accordionInput}
                    type="checkbox"
                    id="contactFooter"
                    defaultChecked={true}
                  />
                  <label
                    htmlFor="contactFooter"
                    className={css.footer__accordionLabel}
                  >
                    {contactNavigation.name}
                  </label>
                  <div className={css.footer__accordionContent}>
                    <ul className={css.footer__navigationList}>
                      {contactNavigation.items &&
                        contactNavigation.items.map(
                          (item: NavigationItemProps, i) => (
                            <NavigationItem
                              key={i}
                              Link={item.Link}
                              LinkProps={item.LinkProps}
                              info={item.info}
                            />
                          ),
                        )}
                    </ul>
                  </div>
                </div>
              )}
            </div>

            <div className={css.footer__switcher}>
              <div className={css.footer__countrySwitcher}>
                {CountrySwitcherProps && (
                  <CountrySwitcher {...CountrySwitcherProps} />
                )}
              </div>
              <div className={css.footer__languageSwitcher}>
                {LanguageSwitcherProps && (
                  <LanguageSwitcher {...LanguageSwitcherProps} />
                )}
              </div>
            </div>

            <div className={css.footer__additional}>
              {socialNavigation && (
                <div className={css.footer__social}>
                  <ul className={css.footer__socialList}>
                    {socialNavigation.items &&
                      socialNavigation.items.map((item, i) => {
                        const Link = item.Link || DefaultLink;

                        return (
                          <li key={i} className={css.footer__socialListItem}>
                            <Link
                              {...item.LinkProps}
                              ariaLabel={item.LinkProps.children}
                            >
                              {item.LinkProps.children === 'Twitter' ? (
                                <TwitterSVG width="36px" />
                              ) : item.LinkProps.children === 'Facebook' ? (
                                <FacebookSVG width="36px" />
                              ) : item.LinkProps.children === 'Linkedin' ? (
                                <LinkedinSVG width="36px" />
                              ) : item.LinkProps.children === 'Xing' ? (
                                <XingSVG width="36px" />
                              ) : item.LinkProps.children === 'Instagram' ? (
                                <InstagramSVG width="36px" />
                              ) : (
                                item.LinkProps.children
                              )}
                            </Link>
                          </li>
                        );
                      })}
                  </ul>
                </div>
              )}
              {children}
            </div>
          </div>
        </MilaGridColumn>
      </MilaGridVoid>
    </Content>
  </footer>
);

export default Footer;