import type {
  DeleteProjectMutation,
  DeleteProjectMutationVariables,
  AdminFindProjectById,
} from 'types/graphql'

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

import { calculateLuminance } from 'src/lib/color'
import { timeTag } from 'src/lib/formatters'
import { batchDelete } from 'src/lib/tus'

const DELETE_PROJECT_MUTATION: TypedDocumentNode<
  DeleteProjectMutation,
  DeleteProjectMutationVariables
> = gql`
  mutation DeleteProjectMutation($id: Int!) {
    deleteProject(id: $id) {
      id
    }
  }
`

interface Props {
  project: NonNullable<AdminFindProjectById['project']>
}

const AdminProject = ({ project }: Props) => {
  const [deleteProject] = useMutation(DELETE_PROJECT_MUTATION, {
    onCompleted: () => {
      toast.success('Project deleted')
      navigate(routes.adminProjects())
    },
    onError: (error) => toast.error(error.message),
  })

  const onDeleteClick = (id: DeleteProjectMutationVariables['id']) => {
    if (confirm('Are you sure you want to delete project ' + id + '?')) {
      batchDelete(project.images)
      deleteProject({ variables: { id } })
    }
  }

  return (
    <div className="flex w-full justify-center">
      <div>
        <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
          <table className="table">
            <thead className="bg-base-200 font-syne">
              <tr>
                <th className="w-0">
                  Project {project.id}: {project.title}
                </th>
                <th>&nbsp;</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>ID</th>
                <td>{project.id}</td>
              </tr>
              <tr>
                <th>Title</th>
                <td>{project.title}</td>
              </tr>
              <tr>
                <th>Description</th>
                <td>{project.description}</td>
              </tr>
              <tr>
                <th>Date</th>
                <td>{timeTag(project.date)}</td>
              </tr>
              <tr>
                <th>Images</th>
                <td>
                  <div className="flex flex-wrap gap-2">
                    {project.images.map((image, i) => (
                      <a
                        key={i}
                        href={image}
                        target="_blank"
                        className="btn btn-sm btn-square"
                        rel="noreferrer"
                      >
                        {i + 1}
                      </a>
                    ))}
                  </div>
                </td>
              </tr>
              <tr>
                <th>Tags</th>
                <td>
                  <div className="flex flex-wrap gap-2">
                    {project.tags.map((tag, i) => (
                      <div
                        key={i}
                        className="badge whitespace-nowrap"
                        style={{
                          backgroundColor: tag.color,
                          color:
                            calculateLuminance(tag.color) > 0.5
                              ? 'black'
                              : 'white',
                        }}
                      >
                        {tag.tag}
                      </div>
                    ))}
                  </div>
                </td>
              </tr>
              <tr>
                <th>Links</th>
                <td>
                  <div className="flex flex-wrap gap-2">
                    {project.links.map((link, i) => (
                      <a
                        href={link}
                        target="_blank"
                        className="badge badge-ghost text-nowrap"
                        key={i}
                        rel="noreferrer"
                      >
                        {link}
                      </a>
                    ))}
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <nav className="my-2 flex justify-center space-x-2">
          <Link
            to={routes.editProject({ id: project.id })}
            title={'Edit project ' + project.id}
            className="btn btn-primary btn-sm uppercase"
          >
            Edit
          </Link>
          <button
            type="button"
            title={'Delete project ' + project.id}
            className="btn btn-error btn-sm uppercase"
            onClick={() => onDeleteClick(project.id)}
          >
            Delete
          </button>
        </nav>
      </div>
    </div>
  )
}

export default AdminProject