import type {
  EditProjectById,
  UpdateProjectInput,
  UpdateProjectMutationVariables,
} from 'types/graphql'

import { navigate, routes } from '@redwoodjs/router'
import type {
  CellSuccessProps,
  CellFailureProps,
  TypedDocumentNode,
} from '@redwoodjs/web'
import { useMutation } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'

import CellFailure from 'src/components/Cell/CellFailure/CellFailure'
import CellLoading from 'src/components/Cell/CellLoading/CellLoading'
import ProjectForm from 'src/components/Project/ProjectForm'

export const QUERY: TypedDocumentNode<EditProjectById> = gql`
  query EditProjectById($id: Int!) {
    project: project(id: $id) {
      id
      title
      description
      date
      links
      images
      tags {
        id
        tag
        color
      }
    }
  }
`

const UPDATE_PROJECT_MUTATION: TypedDocumentNode<
  EditProjectById,
  UpdateProjectMutationVariables
> = gql`
  mutation UpdateProjectMutation($id: Int!, $input: UpdateProjectInput!) {
    updateProject(id: $id, input: $input) {
      id
      title
      description
      date
      links
    }
  }
`

export const Loading = () => <CellLoading />
export const Failure = ({ error }: CellFailureProps) => (
  <CellFailure error={error} />
)

export const Success = ({ project }: CellSuccessProps<EditProjectById>) => {
  const [updateProject, { loading, error }] = useMutation(
    UPDATE_PROJECT_MUTATION,
    {
      onCompleted: () => {
        toast.success('Project updated')
        navigate(routes.adminProjects())
      },
      onError: (error) => toast.error(error.message),
    }
  )

  const onSave = (
    input: UpdateProjectInput,
    id: EditProjectById['project']['id']
  ) => updateProject({ variables: { id, input } })

  return (
    <div className="flex w-full justify-center">
      <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
        <table className="table w-80">
          <thead className="bg-base-200 font-syne">
            <tr>
              <th className="w-0">Edit Project {project.id}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>
                <ProjectForm
                  project={project}
                  onSave={onSave}
                  error={error}
                  loading={loading}
                />
              </th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  )
}