import { useState, useEffect } from 'react'
import SubjectAccessRequestsCell from 'src/components/SubjectAccessRequestsCell'
import { Flash, useQuery, useMutation, useFlash } from '@redwoodjs/web'
import { Form, Submit } from '@redwoodjs/forms'

import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'
import InputTextForm from 'src/components/InputTextForm'

export const QUERY = gql`
  query SUBJECT_ACCESS_REQUEST($userName: String!) {
    userName(userName: $userName) {
      id
      userName
      email
      name
      createdAt
      updatedAt
      image
      bio
      Parts {
        id
        title
        description
        code
        mainImage
        createdAt
        updatedAt
        deleted
      }
      Reaction {
        id
        emote
        part {
          id
          title
        }
        createdAt
        updatedAt
      }
      Comment {
        id
        text
        part {
          id
          title
        }
        createdAt
        updatedAt
      }
      SubjectAccessRequest {
        id
        comment
        createdAt
        updatedAt
      }
    }
  }
`

const CREATE_SUBJECT_ACCESS_REQUEST_MUTATION = gql`
  mutation CreateSubjectAccessRequestMutation(
    $input: CreateSubjectAccessRequestInput!
  ) {
    createSubjectAccessRequest(input: $input) {
      id
      comment
      payload
      userId
      createdAt
      updatedAt
    }
  }
`

const SubjectAccessRequestPage = () => {
  const { addMessage } = useFlash()
  const [input, setInput] = useState({})
  const { data } = useQuery(QUERY, {
    skip: !input.userName,
    variables: { userName: input.userName },
  })
  const onSubmit = (input) => {
    setInput(input)
  }
  const stringData = JSON.stringify(data?.userName)
  const [createSubjectAccessRequest] = useMutation(
    CREATE_SUBJECT_ACCESS_REQUEST_MUTATION,
    {
      onCompleted: () => {
        addMessage('SubjectAccessRequest created.', {
          classes: 'rw-flash-success',
        })
      },
    }
  )
  useEffect(() => {
    if (stringData) {
      createSubjectAccessRequest({
        variables: {
          input: {
            comment: input?.comment,
            payload: stringData,
            userId: data?.userName?.id,
          },
        },
      })
    }
  }, [stringData])
  return (
    <MainLayout>
      <Seo
        title={'Subject Access Request'}
        description="Code of Conduct"
        lang="en-US"
      />
      <section className="max-w-6xl mx-auto mt-20">
        <SubjectAccessRequestsCell />
        Here to fulfill a user's right to portability, before running this
        please check that the query in
        "pages/SubjectAccessRequestPage/SubjectAccessRequestPage.js" is
        up-to-date.
        <Form onSubmit={onSubmit}>
          <div
            className="grid items-center gap-2"
            style={{ gridTemplateColumns: 'auto 1fr' }}
          >
            <span className="capitalize text-gray-500 text-sm align-middle my-3">
              userName:
            </span>
            <InputTextForm
              className="text-xl"
              name="userName"
              validation={{
                required: true,
              }}
            />
            <div />
            <div className="mt-10">
              Please add how they made the request, who is fulling it (who you
              are) and any other details
            </div>
            <span className="capitalize text-gray-500 text-sm align-middle my-3">
              comment:
            </span>
            <InputTextForm
              className="text-xl"
              name="comment"
              validation={{
                required: true,
              }}
            />
          </div>
          <Submit className="bg-indigo-200 text-indigo-800 p-2 px-4 shadow hover:shadow-lg mt-4 rounded">
            Submit
          </Submit>
        </Form>
        <pre className="whitespace-pre-wrap">{stringData}</pre>
      </section>
    </MainLayout>
  )
}

export default SubjectAccessRequestPage