import { FluidObject } from 'gatsby-image';

import { MerchantProduct } from 'types/product';
import { ColourLink } from './generator-site';
import {
  CONTACT_FORM,
  HEADING,
  HERO,
  IMAGE_AND_TEXT, MAP, NEWSLETTER,
  PRODUCT_CATEGORY_LIST,
  PRODUCT_LIST,
  MULTI_IMAGE,
  SOCIAL, RICH_TEXT, HERO_MULTI
} from '../utils/constants/layouts-names';
import { NewsletterThemeData } from '../components/newsletter-signup/newsletter-signup.types';

export interface QuoteModuleContent {
  copy: string;
  author?: string;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
}

export interface HeadingModuleContent {
  type: string;
  originalId: any;
  text: string;
  layoutOption: HEADING.CENTRED | HEADING.LEFT;
  isLink: boolean;
  internalPage?: {
    title: string;
  };
  externalUrl?: string;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
}

export type FormModuleLayout =
  CONTACT_FORM.CENTRED
  | CONTACT_FORM.FULL_WIDTH
  | CONTACT_FORM.TEXT_ASIDE
  | CONTACT_FORM.BEGONIA_CENTER;

export interface FormModuleContent {
  title: string;
  layoutOption: FormModuleLayout;
  bodyCopy: string;
  pageKey: string;
  bottomPadding: boolean;
  topPadding: boolean;
  contactFormFields: [{
    label: string
    fieldType: string
    width: 'Half' | 'Full'
    required: boolean
  }];
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
}

export type HeroModuleLayoutOption =
  | HERO.RIGHT_FLOATING
  | HERO.LEFT_FLOATING
  | HERO.CENTER_FLOATING
  | HERO.RIGHT_FLOAT_OVERLAP
  | HERO.LEFT_FLOAT_OVERLAP
  | HERO.CENTER_FLOAT_OVERLOAP
  | HERO.BOTTOM_FLOATING
  | HERO.BEGONIA_FULL;

export interface HeroModuleContent {
  type: string;
  layoutOption: HeroModuleLayoutOption;
  originalId: any;
  images: Array<{
    fluid: FluidObject;
  }>;
  titleText: string;
  subTitleText: string;
  bodyText: string;
  isLink: boolean;
  tintColour: ColourLink;
  tintOpacity: number;
  internalPage?: {
    title: string;
  };
  bottomPadding: boolean;
  externalUrl?: string;
  backgroundColour?: ColourLink;
}

export type HeroMultiLayoutOption = HERO_MULTI.COSMOS_DEFAULT;

export interface HeroMultiContent {
  type: string;
  layoutOption: HeroMultiLayoutOption;
  originalId: any;
  slideInterval: number;
  backgroundColour: ColourLink;
  titleTextColour: ColourLink;
  bodyTextColour: ColourLink;
  linkTextColour: ColourLink;
  iconColour: ColourLink;
  bottomPadding: boolean;
  items: Array<ClickableItem>;
}

export interface ClickableItem {
  title: string;
  body: string;
  image: FluidObject;
  ctaText: string;
  internalPage?: {
    title: string;
    slug: string;
  };
  externalUrl?: string;
}

export type RichTextModuleLayout =
  | RICH_TEXT.ASTER_DEFAULT
  | RICH_TEXT.BEGONIA_CENTER;

export interface TextModuleContent {
  type: string;
  originalId: any;
  heading: string;
  text: string;
  restrictedWidth: boolean;
  alignment: string;
  layoutOption: RichTextModuleLayout;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  topPadding: boolean;
  bottomPadding: boolean;
}

export interface SingleImageContent {
  externalUrl: string;
  fullBleed: boolean;
  image: {
    alt: string | undefined;
    fluid: FluidObject;
  };
  internalPage: {
    title: string;
    slug: string;
  };
  type: string;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
}

export type ImageAndTextModuleLayout =
  | IMAGE_AND_TEXT.SIDE_BY_SIDE_FLUID
  | IMAGE_AND_TEXT.SIDE_BY_SIDE_FIXED
  | IMAGE_AND_TEXT.TEXT_OVER_IMAGE
  | IMAGE_AND_TEXT.TEXT_CENTERED
  | IMAGE_AND_TEXT.BEGONIA_TEXT_SIDE
  | IMAGE_AND_TEXT.BEGONIA_MAP
  | IMAGE_AND_TEXT.COSMOS_IMAGE_LEFT
  | IMAGE_AND_TEXT.COSMOS_IMAGE_RIGHT;

export type ImageAndTextModuleTextPosition =
  | 'Left'
  | 'Right';

export interface ImageAndTextModuleContent {
  originalId: any;
  layoutOption: ImageAndTextModuleLayout;
  textPosition: ImageAndTextModuleTextPosition;
  bottomPadding: boolean;
  topPadding: boolean;
  image: {
    alt: string | undefined;
    fluid: FluidObject;
  };
  isLink: boolean;
  buttonText?: string;
  bodyText: string;
  internalPage?: {
    title: string;
  };
  externalUrl?: string;
  heading: string;
  subHeading?: string;
  body: string;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
}

export type MultiImageLayoutOption =
  | MULTI_IMAGE.GRID
  | MULTI_IMAGE.CAROUSEL_SLIDER
  | MULTI_IMAGE.BEGONIA_DEFAULT
  | MULTI_IMAGE.COSMOS_GRID
  | MULTI_IMAGE.COSMOS_SLIDER;

export type InstagramModuleLayoutOptions =
  | SOCIAL.ASTER_DEFAULT
  | SOCIAL.BEGONIA_SEPTUPLE;

export interface InstagramModuleContent {
  numberOfPosts: number;
  layoutOption: InstagramModuleLayoutOptions;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
  capWidth: boolean;
}

export type ProductListLayout =
  | PRODUCT_LIST.SMALL
  | PRODUCT_LIST.MEDIUM
  | PRODUCT_LIST.MEDIUM_WITH_SIDE_HEADING
  | PRODUCT_LIST.BEGONIA_TRIPLE
  | PRODUCT_LIST.COSMOS_PRODUCTS_LEFT
  | PRODUCT_LIST.COSMOS_PRODUCTS_RIGHT;

export interface ProductListModuleContent {
  type: string;
  originalId: any;
  title: string;
  description: string;
  titleTextColour: ColourLink;
  dialogueBackgroundColour: ColourLink;
  iconColour: ColourLink;
  layoutOption: ProductListLayout;
  products: MerchantProduct[];
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  titleTextBackground: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
  capWidth: boolean;
}

export type ProductCategoryListLayoutOption =
  | PRODUCT_CATEGORY_LIST.TEXT
  | PRODUCT_CATEGORY_LIST.ICON
  | PRODUCT_CATEGORY_LIST.IMAGE;

export interface ProductCategoryListModuleContent {
  title: string;
  layoutOption: ProductCategoryListLayoutOption;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
}

export type MapModuleLayoutOption =
  | MAP.CENTRED
  | MAP.RIGHT
  | MAP.LEFT;

export interface MapModuleContent {
  type: string;
  originalId: any;
  layoutOption: MapModuleLayoutOption;
  titleText: string;
  bodyText: string;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
}

export interface ButtonModuleContent {
  type: string;
  originalId: any;
  url: string;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
}

export type BlankSpaceSizeOption =
  | 'Small'
  | 'Medium'
  | 'Large';

export interface BlankSpaceModuleContent {
  type: string;
  spaceSize: BlankSpaceSizeOption;
  fillBackground: boolean;
  isFullWidthBackground?: boolean;
  backgroundColour?: ColourLink;
}

export type NewsletterLayoutOption =
  | NEWSLETTER.VERTICAL_STACKED
  | NEWSLETTER.HORIZONTAL
  | NEWSLETTER.HORIZONTAL_STACKED
  | NEWSLETTER.BEGONIA_VERTICAL_STACKED;

export interface NewsletterModuleContent {
  originalId: any;
  layoutOption: NewsletterLayoutOption;
  titleText: string;
  textColor: string;
  subtitleText: string;
  config: NewsletterThemeData;
  bottomPadding: boolean;
  topPadding: boolean;
}

export interface MultiImageModuleContent {
  originalId: any;
  layoutOption: MultiImageLayoutOption;
  iconColour: ColourLink;
  titleTextColour: ColourLink;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
  title: string;
  body: string;
  images: Array<{
    alt: string | undefined;
    title: string | undefined;
    fluid: FluidObject;
  }>
}

export interface CallToActionContent {
  buttonText: string;
  buttonUrl: string;
  callToActionText: string;
  internalPage: {
    title: string;
  };
  isExternal: boolean;
  type: string;
  originalId: any;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  bottomPadding: boolean;
  topPadding: boolean;
}

export interface FloomxFooterContent {
  id: string;
  bottomPadding: boolean;
  topPadding: boolean;
  bannerDesktop: {
    alt: string | undefined;
    fluid: FluidObject;
  };
  bannerTablet: {
    alt: string | undefined;
    fluid: FluidObject;
  };
  bannerMobile: {
    alt: string | undefined;
    fluid: FluidObject;
  };
  iconColour: ColourLink;
  bodyTextColour: ColourLink;
  displayBadge: boolean;
}

export interface VideoModuleContent {
  id: string,
  title: string,
  copy: string,
  bottomPadding: boolean;
  topPadding: boolean;
  fillBackground: boolean;
  isFullWidthBackground: boolean;
  backgroundColour: ColourLink;
  loop: boolean;
  video: {
    url: string
  }
}

export type ContentModuleContent =
  | HeadingModuleContent
  | FormModuleContent
  | HeroModuleContent
  | HeroMultiContent
  | InstagramModuleContent
  | TextModuleContent
  | QuoteModuleContent
  | ProductListModuleContent
  | MapModuleContent
  | ButtonModuleContent
  | FloomxFooterContent
  | BlankSpaceModuleContent
  | NewsletterModuleContent
  | VideoModuleContent;

export interface GeneratorPage {
  title: string;
  content: ContentModuleContent[];
}

interface Tag {
  content: string;
  tagName: string;
  attributes: {
    content: string;
    name: string | null;
    property: string;
  };
}

interface SeoMetaTags {
  tags: Tag[] | null;
}