import React, { useEffect } from 'react'
import { useRouter } from 'next/router'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import { useAuth } from '@/useAuth'
//API Manage
import API, { graphqlOperation, GraphQLResult } from '@aws-amplify/api'
import { GetDataQuery } from '@/API'
import { getData } from '@/graphql/queries'
//State Manage
import { useStateIfMounted } from 'use-state-if-mounted'

const Test = () => {
  const router = useRouter()
  const { id } = router.query
  const { isLoaded, userInfo } = useAuth() //ログイン情報管理⇒以前の記事参照https://zenn.dev/hirof1990/scraps/5cf4702947ec4b
  const [data, setData] = useStateIfMounted(null)
  useEffect(() => {
    const fetchData = async () => {
    if (!isLoaded) return

    if (!userInfo) {
      router.push('/')
      return
    }
    const data = {
      //TODO refactor required
      company: (await API.graphql(
      graphqlOperation(getData, {id: id})
      )) as GraphQLResult<GetDataQuery>,
    }
    setData(data)
    }
    fetchData()
  }
  ,[isLoaded, userInfo])

  return (
    <div class>
      {data===null ? <></> :
      <>
        {data.name}
      </>
      }
    </div>
  )
}

export default Test