/* @aztlan/generator-front 2.4.2 */
import * as React from 'react'

import {
  Meta, StoryObj,
} from '@storybook/react'
import { graphql } from 'react-relay'
import decorators from 'story-utils/decorators.js'
import { RawProvider as Component } from './Provider.js'
import { useOrganizationContext } from './hooks/index.js'

const meta: Meta<typeof Component> = {
  title     :'common/Organization/Provider',
  component :Component,
  decorators:[
    /*
    decorators.getters.staticRouter({
      location:'/mysite.redlibre.mx/home',
      path    :'/:organization/home',
    }), */
    decorators.components.Router,
  ],
}

export default meta

const FRAGMENT = graphql`
  fragment ProviderOrganizationFragment on Query
  @refetchable(queryName: "ProviderOrganizationRefetchQuery")
  @argumentDefinitions(url: { type: "String!" }) {
    organization(url: $url) {
      id
      name
      url
      created
      updated
    }
  }
`

const relay = {
  query:graphql`
    query ProviderOrganizationQuery($url: String!) {
      ...ProviderOrganizationFragment @arguments(url: $url)
    }
  `,
  getReferenceEntry:(data) => [
    'data',
    data,
  ],
  variables    :{ url: 'mysite.redlibre.mx' },
  mockResolvers:{
    OrganizationNode:(_root,
      // _args,
      // _context,
      // _info,
    ) => ({
      id     :btoa('OrganizationNode:some-id'),
      name   :'My Site',
      url    :_root.args.url,
      created:'2021-05-25T00:00:00Z',
      updated:'2021-05-25T00:00:00Z',
    }),
  },
}

function Tester() {
  const organization = useOrganizationContext()
  return (
    <pre style={{ whiteSpace: 'pre-wrap' }}>
      {JSON.stringify(
        organization, null, 2,
      )}
    </pre>
  )
}

export const Base: StoryObj<typeof Component> = {
  args:{
    // @ts-ignore
    children:<Tester />,
    FRAGMENT,
  },
  parameters:{ relay },
}