/* eslint-disable @typescript-eslint/no-explicit-any */
import { ExpanderServer, ExpanderProps } from '../components/Expander'
import { ExpanderClient } from '../components/Expander/client'
import React, { useEffect } from 'react'
import oTracking from '@financial-times/o-tracking/main'
import './Expander.stories.scss'
import ClipClient from '../components/content-tree/Clip/client'
import RichText from '../components/RichText'
import { ContentTree } from '@financial-times/content-tree'

type ArgsType = ExpanderProps & { structuredContent: any; classNames?: string }

const structuredContent = {
  tree: {
    type: 'body',
    version: 1,
    children: [
      {
        type: 'image-set',
        id: 'http://api.ft.com/content/57b3150f-434e-4463-a863-3311d53bf5c2',
        data: {
          referenceIndex: 0,
        },
      } as ContentTree.ImageSet,
      {
        type: 'paragraph',
        children: [
          {
            type: 'text',
            value:
              'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
          },
        ],
      } as ContentTree.Paragraph,
      {
        type: 'paragraph',
        children: [
          {
            type: 'text',
            value:
              'In a vote on Wednesday night, the lower chamber of Congress rejected Greene’s bid with overwhelming support from Democrats as well as Republicans. ',
          },
        ],
      } as ContentTree.Paragraph,
      ,
      {
        type: 'paragraph',
        children: [
          {
            type: 'text',
            value:
              'The vote all but ensures that Johnson will remain in his post until after the November election, and will put a lid on a debate over his political future that has lasted for weeks among Republicans in Congress.  ',
          },
        ],
      } as ContentTree.Paragraph,
      {
        id: 'http://api.ft.com/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
        type: 'recommended',
        heading: 'Recommended',
        teaserTitleOverride:
          'Hargreaves Lansdown backs £5.4bn private equity takeover ',
        data: {
          referenceIndex: 1,
        },
      },
    ] as ContentTree.Body['children'],
  },
  references: [
    {
      type: 'image-set',
      picture: {
        __typename: 'PictureStandard',
        alt: 'A Waitrose shop in London ',
        caption:
          'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
        credit: '© Ian Smith/FT',
        imageType: 'image',
        layoutWidth: 'standard',
        fallbackImage: {
          __typename: 'ImageStandardInline',
          height: 1368,
          width: 1600,
          caption:
            'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
          credit: '© Ian Smith/FT',
          format: 'standard-inline',
          url: 'https://images.ft.com/v3/image/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=1',
          id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
        },
        images: [
          {
            __typename: 'ImageStandardInline',
            height: 1368,
            width: 1600,
            caption:
              'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
            credit: '© Ian Smith/FT',
            format: 'standard-inline',
            url: 'https://images.ft.com/v3/image/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=1',
            id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
            sourceSet: [
              {
                dpr: 1,
                width: 700,
                url: 'https://images.ft.com/v3/image/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=1',
              },
              {
                dpr: 2,
                width: 700,
                url: 'https://images.ft.com/v3/image/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=2',
              },
            ],
          },
        ],
      },
    },
    {
      type: 'recommended',
      isInLiveBlog: true,
      teaser: {
        title: 'Hargreaves Lansdown backs £5.4bn private equity takeover ',
        id: '02e03dda-165c-40ec-89e3-c2ba502fe9b0',
        url: 'https://www.ft.com/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
        relativeUrl: '/content/02e03dda-165c-40ec-89e3-c2ba502fe9b0',
        type: 'article',
        publishedDate: '2024-06-18T15:25:49.739Z',
        firstPublishedDate: '2024-06-18T13:49:35.049Z',
        metaPrefixText: null,
        metaSuffixText: null,
        metaLink: {
          id: '4d1b8529-f8a3-4740-97e6-4a6f68214092',
          url: 'https://www.ft.com/stream/4d1b8529-f8a3-4740-97e6-4a6f68214092',
          relativeUrl: '/stream/4d1b8529-f8a3-4740-97e6-4a6f68214092',
          prefLabel: 'Hargreaves Lansdown PLC',
        },
        metaAltLink: null,
        image: {
          url: 'https://images.ft.com/v3/image/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F409586da-1e01-42d8-b4e6-cd99b82923b3.jpg?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=1',
          width: 2266,
          height: 1275,
          altText: 'Hargreaves Lansdown logo',
        },
        indicators: {
          accessLevel: 'subscribed',
          isOpinion: false,
          isColumn: false,
          isPodcast: false,
          isEditorsChoice: false,
          isExclusive: false,
          isScoop: false,
        },
      },
    },
  ],
}

const structuredContentNoMoreElements = {
  tree: {
    type: 'body',
    version: 1,
    children: [
      {
        type: 'image-set',
        id: 'http://api.ft.com/content/57b3150f-434e-4463-a863-3311d53bf5c2',
        data: {
          referenceIndex: 0,
        },
      } as ContentTree.ImageSet,
      {
        type: 'paragraph',
        children: [
          {
            type: 'text',
            value:
              'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
          },
        ],
      } as ContentTree.Paragraph,
    ],
  },
  references: [
    {
      type: 'image-set',
      picture: {
        __typename: 'PictureStandard',
        alt: 'A Waitrose shop in London ',
        caption:
          'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
        credit: '© Ian Smith/FT',
        imageType: 'image',
        layoutWidth: 'standard',
        fallbackImage: {
          __typename: 'ImageStandardInline',
          height: 1368,
          width: 1600,
          caption:
            'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
          credit: '© Ian Smith/FT',
          format: 'standard-inline',
          url: 'https://images.ft.com/v3/image/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=1',
          id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
        },
        images: [
          {
            __typename: 'ImageStandardInline',
            height: 1368,
            width: 1600,
            caption:
              'Staff at the Waitrose on King William street in London, which is taking cash only payments, said that disruption caused by the IT outage was ‘everywhere’',
            credit: '© Ian Smith/FT',
            format: 'standard-inline',
            url: 'https://images.ft.com/v3/image/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F5a89fdc8-323b-4cf2-a317-794074a1adae.png?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=1',
            id: '5a89fdc8-323b-4cf2-a317-794074a1adae',
            sourceSet: [
              {
                dpr: 1,
                width: 700,
                url: 'https://images.ft.com/v3/image/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=1',
              },
              {
                dpr: 2,
                width: 700,
                url: 'https://images.ft.com/v3/image/raw/ftcms%3A5a89fdc8-323b-4cf2-a317-794074a1adae?source=cp-content-pipeline-api&fit=scale-down&quality=highest&width=700&dpr=2',
              },
            ],
          },
        ],
      },
    },
  ],
}

const storyArgs: ArgsType = {
  expandLabel: 'Open',
  collapseLabel: 'Close',
  onlyMobile: false,
  id: '111232323-12123-2323',
  structuredContent: structuredContent,
}

export default {
  title: 'Expander',
  component: ExpanderServer,
  tags: ['autodocs'],
}

const LiveBLogWrapper: React.FC<ArgsType> = (args) => {
  const { classNames } = args

  return (
    <div className={classNames}>
      <article
        id="site-content"
        role="main"
        className="article article-grid  article-grid--no-full-width-graphics js enhanced"
        data-article-type="no-full-width-graphics"
      >
        <div
          className="article__content"
          data-trackable="article-body"
          data-component="article-body"
          style={{ position: 'relative' }}
        >
          <div
            className="article__content-body n-content-body js-article__content-body o3-type-body-content-base"
            data-attribute="article-content-body"
          >
            <LiveBlogPostWrapper {...args} id="111"></LiveBlogPostWrapper>
          </div>
        </div>
        <div className="article__right "></div>
      </article>
    </div>
  )
}

const LiveBlogPostWrapper = (args: ArgsType) => {
  const { structuredContent, ...expanderProps } = args
  useEffect(() => {
    oTracking.init({
      context: { product: 'next' },
      test: true,
    })

    const clips = ClipClient.init(null, {})

    return () => {
      clips.forEach((clip) => clip.unload())
    }
  }, [])
  return (
    <article id={args.id}>
      <div className="n-content-body o3-type-body-content-base">
        <div
          data-trackable="truncated-post"
          data-trackable-context-post="1234"
          data-component="example-boundary"
        >
          <ExpanderServer {...expanderProps} id={`${args.id}_expander`}>
            <RichText structuredContent={structuredContent} />
          </ExpanderServer>
        </div>
      </div>
    </article>
  )
}

export const OnlyServer = (args: ArgsType) => {
  return <LiveBLogWrapper {...args} />
}

OnlyServer.args = { ...storyArgs }

export const WithClient = (args: ArgsType) => {
  useEffect(() => {
    const clips = ClipClient.init(null, {})
    const expanders = ExpanderClient.init()
    return () => {
      clips.forEach((clip) => clip.unload())
      expanders.forEach((expander) => expander?.destroy())
    }
  }, [])
  return <LiveBLogWrapper {...args} />
}

WithClient.args = { ...storyArgs }

export const OnlyMobileWithClient = WithClient
OnlyMobileWithClient.args = { ...storyArgs, onlyMobile: true }

export const OnlyMobileServer = OnlyServer
OnlyMobileServer.args = { ...storyArgs, onlyMobile: true }

export const NoMoreElements = (args: any) => {
  return WithClient({
    ...args,
    structuredContent: structuredContentNoMoreElements,
  })
}