import type { Meta, StoryObj } from '@storybook/react'

import React from 'react'
import RichText from '@/components/atoms/RichText'

export default {
  title: 'Documentation/JWT',
  tags: ['autodocs']
} as Meta

export const JWT: StoryObj = {
  render: args => (
    <div style={{ width: '100%' }}>
      <p>Generate token to enter in .env file</p>

      <code style={{ display: 'block', margin: '24px 0' }}>
        <RichText>
          {`
        mutation LoginUser {
          login( input: {
            clientMutationId: "uniqueId",
            username: "your_login",
            password: "your password"
          } ) {
            authToken
            user {
              id
              name
            }
          }
        }
        `}
        </RichText>
      </code>
      <p>
        Then generate a salt to use in wp-config define var
        <br />
        https://api.wordpress.org/secret-key/1.1/salt/
      </p>

      <code style={{ display: 'block', margin: '24px 0' }}>
        <RichText>
          {`
        mutation RefreshAuthToken {
          refreshJwtAuthToken(
            input: {
              clientMutationId: "uniqueId"
              jwtRefreshToken: "your_refresh_token",
          }) {
            authToken
          }
        }
        `}
        </RichText>
      </code>
      <p>Refresh code</p>
    </div>
  ),
  args: {}
}