import React, { FC, ReactType, ReactNode } from 'react';
import * as R from 'ramda';
import Layout from '../../components/Layout';
import Content from '../../components/Content';
import { PartnerListProps } from '../../components/PartnerList';
import Banner, { BannerProps } from '../../components/Banner';
import TextWithImage from '../../components/TextWithImage';
import css from './index.module.css';
import { PackageListProps } from '../../components/PackageList';

export interface HomepageProps {
  title?: string;
  subtitle?: string;
  isAustria: boolean;
  isUk: boolean;
  BannerProps?: BannerProps;
  PackageList?: ReactType;
  PackageListProps?: PackageListProps;
  Search: ReactType;
  SearchProps: any;
  FeaturedPartnersList: ReactType;
  FeaturedPartnersListProps: PartnerListProps;
  EnterprisePartnerList: ReactType;
  SectionHowToProps?: {
    items: {
      title: string;
      image: unknown;
    }[];
    Image: ReactType;
  };
  SectionServicesProps?: {
    title: string;
    items: {
      title: string;
      image: unknown;
    }[];
    Image: ReactType;
  };
  recommendedPrice?: string;
  SectionAboutMila?: ReactNode;
  children?: ReactNode;
  hasCustomBanner?: boolean;
  CustomBanner?: ReactType;
  Alerts?: ReactNode;
  CategoryTab: ReactType;
}

const Homepage: FC<HomepageProps> = ({
  title,
  subtitle,
  FeaturedPartnersList,
  FeaturedPartnersListProps,
  SearchProps,
  SectionHowToProps,
  SectionServicesProps,
  children,
  SectionAboutMila,
  Alerts,
  CategoryTab,
}) => {
  const keepCategories = ['ch', 'de', 'gb', 'uk'].includes(
    SearchProps?.region?.toLowerCase(),
  );
  return (
    <Layout>
      <Banner
        title={title}
        subtitle={subtitle}
        Image={null}
        ImageProps={{}}
        FeaturedPartnersList={FeaturedPartnersList}
        FeaturedPartnersListProps={FeaturedPartnersListProps}
      />
      {Alerts && Alerts}
      {CategoryTab && keepCategories && CategoryTab}

      {SectionServicesProps && SectionHowToProps && (
        <div style={{ background: 'rgb(250, 250, 250)' }}>
          <Content>
            <div className={css.homepage__listSection}>
              <div className={css.homepage__listSectionItem}>
                {SectionHowToProps.items.map(item => {
                  return (
                    <div key={item.title} className={css.homepage__listHowTo}>
                      <TextWithImage
                        title={item.title}
                        text={R.path(
                          ['text', 'content', 0, 'content', 0, 'value'],
                          item,
                        )}
                        Image={SectionHowToProps.Image}
                        ImageProps={item.image}
                      />
                    </div>
                  );
                })}
              </div>
              <div className={css.homepage__listSectionItem}>
                {SectionServicesProps.items.map(item => {
                  return (
                    <div key={item.title} className={css.homepage__listHowTo}>
                      <TextWithImage
                        title={item.title}
                        text={R.path(
                          ['text', 'content', 0, 'content', 0, 'value'],
                          item,
                        )}
                        Image={SectionServicesProps.Image}
                        ImageProps={item.image}
                      />
                    </div>
                  );
                })}
              </div>
            </div>
          </Content>
        </div>
      )}

      {children}
      {SectionAboutMila && SectionAboutMila}
    </Layout>
  );
};

export default Homepage;