import React, { useState } from 'react'
import jsonschema from 'jsonschema'
import profile from '../profiles/report.json'
import { ReportTask } from './ReportTask'
import { IReport } from '../report'

export interface IReportProps {
  /**
   * Report object i.e. generated by `frictionless.validate`
   */
  report: IReport
  /**
   * Whether to show the debug form
   */
  debug?: boolean
}

/**
 * Visual component for Frictionless Report rendering
 */
export function Report(props: IReportProps) {
  const { debug } = props
  const [report, setReport] = useState(props.report)

  // Frictionless Framework (v5) (compat)
  if ('warnings' in report) {
    report.version = '5'
    // @ts-ignore
    report.time = report.stats.seconds
    report.errors.forEach((error: any) => {
      error.code = error.type
    })
    for (const task of report.tasks as any[]) {
      task.scope = []
      task.partial = false
      task.time = task.stats.seconds
      task.errors.forEach((error: any) => {
        error.code = error.type
        error.name = error.title
        error.rowPosition = error.rowNumber
        error.fieldPosition = error.fieldNumber
      })
      task.resource = { name: task.name, path: task.place }
      if (task.type === 'table') {
        task.resource.schema = {
          fields: task.labels.map((label: string) => ({ name: label })),
        }
      }
    }
  }

  // Broken report
  const reportValidation = jsonschema.validate(report, profile)
  if (!reportValidation.valid) {
    return (
      <div className="frictionless-components-report">
        <h5>
          <strong>Invalid report</strong>
        </h5>
        <hr />
        <div style={{ whiteSpace: 'pre', fontFamily: 'courier' }}>
          {JSON.stringify(reportValidation.errors, null, 2)}
        </div>
        <hr />
        <div style={{ whiteSpace: 'pre', fontFamily: 'courier' }}>
          {JSON.stringify(report, null, 2)}
        </div>
      </div>
    )
  }

  // Normal report
  const tasks = getSortedTasks(report)
  return (
    <div className="frictionless-components-report">
      {/* Form */}
      {!!debug && (
        <textarea
          className="form-control debug"
          value={JSON.stringify(report, null, 2)}
          onChange={(ev) => setReport(JSON.parse(ev.target.value))}
        ></textarea>
      )}

      {/* Errors */}
      {!!report.errors.length && (
        <div className="file error">
          <h4 className="file-heading">
            <div className="inner">
              <a className="file-name">
                <strong>Errors</strong>
              </a>
            </div>
          </h4>
          <ul className="passed-tests result">
            {report.errors.map((error, index) => (
              <li key={index}>
                <span className="badge badge-error">{error.message}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Tasks */}
      {tasks.map((task, index) => (
        <ReportTask
          key={index}
          task={task}
          taskNumber={index + 1}
          tasksCount={tasks.length}
        />
      ))}
    </div>
  )
}

// Helpers

function getSortedTasks(report: IReport) {
  return [
    ...report.tasks.filter((task) => !task.valid),
    ...report.tasks.filter((task) => task.valid),
  ]
}