import React, { Fragment } from 'react';
import { Grid, GridItem, ImageCard, Text } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';
import { useDancefloorQuery } from 'typings/graphql';
import { parseMainColor } from 'beta/utils/typeGuards';
import { AccordionItems } from 'beta/components/accordion-items/AccordionItems';

const DEFAULT_ITEM_COUNT = 2;

type DancefloorProps = {
  isAccordion: boolean;
};

export const Dancefloor = ({ isAccordion }: DancefloorProps) => {
  const { t, i18n } = useTranslation('containers');

  const { data, loading, error } = useDancefloorQuery({
    variables: {
      locale: i18n.language,
    },
  });

  if (error || loading || !data?.appHomeSection?.itemsCollection?.items.length) return null;

  const firstTwoItems = data.appHomeSection.itemsCollection.items.slice(0, DEFAULT_ITEM_COUNT);
  const restOfItems = data.appHomeSection.itemsCollection.items.slice(DEFAULT_ITEM_COUNT);

  return (
    <>
      {isAccordion ? (
        <AccordionItems
          sectionTitle={data.appHomeSection.title ?? ''}
          expandButtonText={t('yfirlitOpportunities.expandButtonText')}
          closeButtonText={t('yfirlitOpportunities.closeButtonText')}
          itemsShownByDefault={firstTwoItems.map((item, i) => {
            return (
              <Fragment key={i}>
                {item?.__typename === 'AppDancefloorItem_cfContent' && (
                  <ImageCard
                    key={item.title}
                    image={{
                      url: item.image?.url ?? '',
                      alt: item.image?.title ?? item.title ?? 'image',
                    }}
                    color={parseMainColor((item.themeColor as string) ?? 'pink', 'pink')}
                    {...(item.tag && { pill: { text: item.tag, shape: 'boxed' } })}
                    eyebrow={item.subtitle ?? ''}
                    title={item.title ?? ''}
                    mainButton={{
                      text: t('yfirlitOpportunities.danceFloorButtonText'),
                      renderAs: 'a',
                      href: item.url,
                      openInNewTab: true,
                    }}
                    height="100%"
                    dottedShadow="none"
                  />
                )}
              </Fragment>
            );
          })}
          restOfItems={restOfItems.map((item, i) => {
            return (
              <Fragment key={i}>
                {item?.__typename === 'AppDancefloorItem_cfContent' && (
                  <ImageCard
                    key={item.title}
                    image={{
                      url: item.image?.url ?? '',
                      alt: item.image?.title ?? item.title ?? 'image',
                    }}
                    color={parseMainColor((item.themeColor as string) ?? 'pink', 'pink')}
                    {...(item.tag && { pill: { text: item.tag, shape: 'boxed' } })}
                    eyebrow={item.subtitle ?? ''}
                    title={item.title ?? ''}
                    mainButton={{
                      text: t('yfirlitOpportunities.danceFloorButtonText'),
                      renderAs: 'a',
                      href: item.url,
                      openInNewTab: true,
                    }}
                    height="100%"
                    dottedShadow="none"
                  />
                )}
              </Fragment>
            );
          })}
        />
      ) : (
        <>
          <Text variant="h6" marginBottom={4}>
            {data.appHomeSection.title ?? t('yfirlitOpportunities.oportunitySectionTitle')}
          </Text>
          <Grid gridTemplate={{ sm: 4, md: 12 }}>
            {data.appHomeSection.itemsCollection.items.map((item, i) => {
              return (
                <GridItem
                  key={i}
                  gridColumn={{
                    sm: 'span4',
                  }}
                >
                  {item?.__typename === 'AppDancefloorItem_cfContent' && (
                    <ImageCard
                      key={item.title}
                      image={{
                        url: item.image?.url ?? '',
                        alt: item.image?.title ?? item.title ?? 'image',
                      }}
                      color={parseMainColor((item.themeColor as string) ?? 'pink', 'pink')}
                      {...(item.tag && { pill: { text: item.tag, shape: 'boxed' } })}
                      eyebrow={item.subtitle ?? ''}
                      title={item.title ?? ''}
                      mainButton={{
                        text: t('yfirlitOpportunities.danceFloorButtonText'),
                        renderAs: 'a',
                        href: item.url,
                        openInNewTab: true,
                      }}
                      height="100%"
                      dottedShadow="none"
                    />
                  )}
                </GridItem>
              );
            })}
          </Grid>
        </>
      )}
    </>
  );
};