import { graphql } from 'gatsby';

export const ContactModule = graphql`
  fragment ContactForm on DatoCmsContactform {
#    originalId
    layoutOption
    title
    bodyCopy
    pageKey
    bottomPadding
    topPadding
    contactFormFields {
      label
      fieldType
      width
      required
    }
    fillBackground
    backgroundColour {
      key
    }
    isFullWidthBackground
  }
`;

export const FloomxFooter = graphql`
  fragment FloomxFooter on DatoCmsFloomxFooter {
    id
    bottomPadding
    topPadding
    displayBadge
    bannerDesktop {
      fluid {
        ...GatsbyDatoCmsFluid
      }
    }
    bannerTablet {
      fluid {
        ...GatsbyDatoCmsFluid
      }
    }
    bannerMobile {
      fluid {
        ...GatsbyDatoCmsFluid
      }
    }
    iconColour {
      key
    }
    bodyTextColour {
      key
    }
  }
`;

export const QuoteModule = graphql`
  fragment Quote on DatoCmsQuote {
#    originalId
    copy
    author
    fillBackground
    bottomPadding
    topPadding
    backgroundColour {
      key
    }
    isFullWidthBackground
  }
`

export const HeadingModule = graphql`
  fragment Heading on DatoCmsHeading {
#    originalId
    text
    layoutOption
    isLink
    fillBackground
    bottomPadding
    topPadding
    backgroundColour {
      key
    }
    isFullWidthBackground
    internalPage {
      title
      fields{
        slug
      }
    }
    externalUrl
  }
`;

export const HeroModule = graphql`
  fragment Hero on DatoCmsHero {
#    originalId
    layoutOption
    titleText
    subTitleText
    bodyText
    isLink
    bottomPadding
    internalPage {
      title
      fields{
        slug
      }
    }
    externalUrl
    images {
      fluid {
        ...GatsbyDatoCmsFluid
      }
    }
    tintColour {
      key
    }
    tintOpacity
    backgroundColour {
      key
    }
  }
`;

export const SingleImageModule = graphql`
  fragment SingleImage on DatoCmsClickableImage {
  #  originalId
    fullBleed
    image {
      alt
      fluid {
        ...GatsbyDatoCmsFluid
      }
    }
    isLink
    internalPage {
      title
    }
    externalUrl
    fillBackground
    isFullWidthBackground
    backgroundColour {
      key
    }
    bottomPadding
    topPadding
  }
`

export const HeroMultiModule = graphql`
  fragment HeroMulti on DatoCmsHeroMulti {
#    originalId
    layoutOption
    slideInterval
    bottomPadding
    backgroundColour {
      key
    }
    titleTextColour {
      key
    }
    bodyTextColour {
      key
    }
    linkTextColour {
      key
    }
    iconColour {
      key
    }
    items {
      title
      body
      image {
        url
        fluid {
          ...GatsbyDatoCmsFluid
        }
      }
      ctaText
      internalPage {
        title
      }
      externalUrl
    }
  }
`;

export const RichTextModule = graphql`
  fragment RichText on DatoCmsRichText {
#    originalId
    heading
    text
    alignment
    layoutOption
    fillBackground
    bottomPadding
    topPadding
    backgroundColour {
      key
    }
    isFullWidthBackground
  }
`;

export const InstagramModule = graphql`
  fragment Instagram on DatoCmsInstagram {
    numberOfPosts
    layoutOption
    fillBackground
    bottomPadding
    topPadding
    capWidth
    backgroundColour {
      key
    }
    isFullWidthBackground
  }
`;

export const ImageAndTextModule = graphql`
  fragment ImageAndText on DatoCmsImageAndText {
#    originalId
    layoutOption
    textPosition
    fillBackground
    bottomPadding
    topPadding
    backgroundColour {
      key
    }
    isFullWidthBackground
    image {
      url
      fluid {
        ...GatsbyDatoCmsFluid
      }
    }
    isLink
    buttonText
    internalPage {
      title
      fields{
        slug
      }
    }
    externalUrl
    heading
    subHeading
    body
  }
`;

export const MultiImageModule = graphql`
  fragment MultiImage on DatoCmsMultiImage {
#    originalId
    layoutOption
    bottomPadding
    topPadding
    title
    body
    titleTextColour {
      key
    }
    iconColour {
      key
    }
    backgroundColour {
      key
    }
    fillBackground
    isFullWidthBackground
    images {
      id
      alt
      title
      url
      fluid(maxHeight: 600) {
        ...GatsbyDatoCmsFluid
      }
    }
  }
`;

export const ProductListModule = graphql`
  fragment ProductList on DatoCmsProductList {
#    originalId
    title
    description
    layoutOption
    fillBackground
    bottomPadding
    topPadding
    capWidth
    backgroundColour {
      key
    }
    isFullWidthBackground
    titleTextBackground {
      key
    }
    titleTextColour {
      key
    }
    dialogueBackgroundColour {
      key
    }
    iconColour {
      key
    }
    products {
      #     TODO needs to actually point to a floomx-product-id
      floomxId
#      originalId
      fields {
        productData {
          id
          title
          slug
          merchant {
            title
          }
          variations {
            title
            price
            type
            media {
              id
              src
            }
          }
        }
      }
    }
  }
`;

export const ProductCategoryListModule = graphql`
  fragment ProductCategoryList on DatoCmsProductCategoryList {
    title
    layoutOption
    fillBackground
    bottomPadding
    topPadding
    backgroundColour {
      key
    }
    isFullWidthBackground
  }
`;

export const MapModule = graphql`
  fragment Map on DatoCmsMap {
#    originalId
    layoutOption
    titleText
    bodyText
    fillBackground
    bottomPadding
    topPadding
    backgroundColour {
      key
    }
    isFullWidthBackground
  }
`;

export const CallToActionModule = graphql`
  fragment CallToAction on DatoCmsCallToAction {
#    originalId
    buttonText
    callToActionText
    fillBackground
    bottomPadding
    topPadding
    backgroundColour {
      key
    }
    isFullWidthBackground
    internalPage {
      title
      fields{
        slug
      }
    }
    buttonUrl
    isExternal
  }
`;

export const BlankSpaceModule = graphql`
  fragment BlankSpace on DatoCmsBlankSpace {
    spaceSize
    fillBackground
    backgroundColour {
      key
    }
    isFullWidthBackground
  }
`;

export const ClickableImageModule = graphql`
  fragment ClickableImage on DatoCmsClickableImage {
    internalPage {
      title
      fields{
        slug
      }
    }
    bottomPadding
    topPadding
    externalUrl
    fullBleed
    fillBackground
    backgroundColour {
      key
    }
    isFullWidthBackground
    image {
      url
      fluid {
        ...GatsbyDatoCmsFluid
      }
    }
  }
`;

export const NewsletterModule = graphql`
  fragment Newsletter on DatoCmsNewsletter {
#    originalId
    layoutOption
    titleText
    subtitleText
    bottomPadding
    topPadding
  }
`;

export const VideoModule = graphql`
  fragment Video on DatoCmsVideo {
#    originalId
    title
    copy
    bottomPadding
    topPadding
    fillBackground
    loop
    backgroundColour {
      key
    }
    isFullWidthBackground
    video {
      url
    }
  }
`;

export const ContentPageModule = graphql`
  fragment ContentPage on DatoCmsContentpage {
    title
#    originalId
    content {
      type: __typename
      ...ContactForm
      ...FloomxFooter
      ...Heading
      ...Hero
      ...HeroMulti
      ...RichText
      ...Instagram
      ...ImageAndText
      ...MultiImage
      ...ProductList
      ...ProductCategoryList
      ...Map
      ...CallToAction
      ...BlankSpace
      ...ClickableImage
      ...Newsletter
      ...Quote
      ...Video
    }
  }
`;