/* eslint-disable no-console */
import React from 'react'
import {isPlainObject} from 'lodash'
import PropTypes from 'prop-types'
import sanityClient from 'part:@sanity/base/client'
import AnchorButton from 'part:@sanity/components/buttons/anchor'
import styles from './ProjectInfo.css'

function isUrl(url) {
  return /^https?:\/\//.test(`${url}`)
}

function getGraphQlUrl(projectId) {
  return `https://${projectId}.api.sanity.io/v1/graphql/test`
}

function getGroqUrl(projectId) {
  return `https://${projectId}.api.sanity.io/v1/groq/test`
}

function getManageUrl(projectId) {
  return `https://manage.sanity.io/projects/${projectId}`
}

class ProjectInfo extends React.Component {
  static propTypes = {
    data: PropTypes.array
  }
  static defaultProps = {
    data: []
  }

  state = {
    studioHost: null,
    graphqlApi: null
  }

  componentDidMount() {
    const {projectId} = sanityClient.config()
    // fetch project data
    sanityClient.projects
      .getById(projectId)
      .then(result => {
        const {studioHost} = result
        this.setState({studioHost: studioHost ? `https://${studioHost}.sanity.studio` : null})
      })
      .catch(error => {
        console.log('Error while looking for studioHost', error)
        this.setState({
          studioHost: {
            error: 'Something went wrong while looking up studioHost. See console.'
          }
        })
      })

    // ping assumed graphql endpoint
    sanityClient
      .request({
        method: 'HEAD',
        uri: `/graphql/${sanityClient.config().dataset}/default`
      })
      .then(response => {
        this.setState({graphqlApi: getGraphQlUrl(projectId)})
      })
      .catch(error => {
        if (error.statusCode === 404) {
          this.setState({graphqlApi: null})
        } else {
          console.log('Error while looking for graphqlApi', error)
          this.setState({
            graphqlApi: {
              error: 'Something went wrong while looking up graphqlApi. See console.'
            }
          })
        }
      })
  }

  assembleTableRows() {
    const {projectId, dataset} = sanityClient.config()
    const {graphqlApi, studioHost} = this.state
    const propsData = this.props.data

    let result = [
      {
        title: 'Sanity project',
        rows: [{title: 'Project ID', value: projectId}, {title: 'Dataset', value: dataset}]
      }
    ]

    // Handle any apps
    const apps = [studioHost ? {title: 'Studio', value: studioHost} : null]
      .concat(propsData.filter(item => item.category === 'apps'))
      .filter(Boolean)
    if (apps.length > 0) {
      result = result.concat([{title: 'Apps', rows: apps}])
    }

    // Handle APIs
    result = result.concat(
      [
        {
          title: 'APIs',
          rows: [
            {title: 'GROQ', value: getGroqUrl(projectId)},
            {title: 'GraphQL', value: graphqlApi || 'Not deployed'}
          ]
        }
      ],
      propsData.filter(item => item.category === 'apis')
    )

    // Handle whatever else there might be
    const otherStuff = {}
    propsData.forEach(item => {
      if (item.category !== 'apps' && item.category !== 'apis') {
        if (!otherStuff[item.category]) {
          otherStuff[item.category] = []
        }
        otherStuff[item.category].push(item)
      }
    })
    Object.keys(otherStuff).forEach(category => {
      result.push({title: category, rows: otherStuff[category]})
    })

    return result
  }

  render() {
    return (
      <div className={styles.container}>
        <header className={styles.header}>
          <h2 className={styles.title}>Project info</h2>
        </header>
        <table className={styles.table}>
          {this.assembleTableRows().map(item => {
            if (!item || !item.rows) {
              return null
            }

            return (
              <tbody key={item.title}>
                <tr>
                  <th colSpan="2" className={styles.sectionHeader}>
                    {item.title}
                  </th>
                </tr>
                {item.rows.map(row => {
                  return (
                    <tr key={row.title}>
                      <th>{row.title}</th>
                      {isPlainObject(row.value) && (
                        <td className={styles.apiError}>{row.value.error}</td>
                      )}
                      {!isPlainObject(row.value) && (
                        <td>
                          {isUrl(row.value) ? <a href={row.value}>{row.value}</a> : row.value}
                        </td>
                      )}
                    </tr>
                  )
                })}
              </tbody>
            )
          })}
        </table>
        <div className={styles.buttonContainer}>
          <AnchorButton
            href={getManageUrl(sanityClient.clientConfig.projectId)}
            bleed
            color="primary"
            kind="simple"
          >
            Manage project
          </AnchorButton>
        </div>
      </div>
    )
  }
}

export default ProjectInfo

@@ -10,16 +10,41 @@
 -disable
+ react/forbid-prop-types,
  no-cons
@@ -306,16 +306,68 @@
 o.css'%0A%0A
+const %7BprojectId, dataset%7D = sanityClient.config()%0A%0A
 function
@@ -441,33 +441,24 @@
 tGraphQlUrl(
-projectId
 ) %7B%0A  return
@@ -505,19 +505,33 @@
 graphql/
-tes
+$%7Bdataset%7D/defaul
 t%60%0A%7D%0A%0Afu
@@ -544,33 +544,24 @@
  getGroqUrl(
-projectId
 ) %7B%0A  return
@@ -605,20 +605,26 @@
 v1/groq/
-test
+$%7Bdataset%7D
 %60%0A%7D%0A%0Afun
@@ -642,25 +642,16 @@
 nageUrl(
-projectId
 ) %7B%0A  re
@@ -936,54 +936,8 @@
 ) %7B%0A
-    const %7BprojectId%7D = sanityClient.config()%0A
     
@@ -1552,30 +1552,8 @@
 l/$%7B
-sanityClient.config().
 data
@@ -1650,25 +1650,16 @@
 phQlUrl(
-projectId
 )%7D)%0A    
@@ -2072,63 +2072,8 @@
 ) %7B%0A
-    const %7BprojectId, dataset%7D = sanityClient.config()%0A
     
@@ -2758,25 +2758,16 @@
 GroqUrl(
-projectId
 )%7D,%0A    
@@ -4722,28 +4722,16 @@
 orButton
-%0A           
  href=%7Bg
@@ -4746,75 +4746,16 @@
 Url(
-sanityClient.clientConfig.projectId)%7D%0A            bleed%0A           
+)%7D bleed
  col
@@ -4766,28 +4766,16 @@
 primary%22
-%0A           
  kind=%22s
@@ -4780,27 +4780,16 @@
 %22simple%22
-%0A          
 %3E%0A      

Fix graphQl url bug in the project-info widget