import React, { useState } from 'react'

import { EditOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons'
import { Table, TableColumnsType, Typography, Select } from 'antd'
import useSWR from 'swr'

import { OrgRole, OrgUser } from '@clinic/client'
import { listRoles } from '~/api'
import DelConfirmButton from '~/components/DelConfirmButton'
import { useCurOrg } from '~/hooks/state'

import './UsersTable.css'

const { Option } = Select

interface UserOrgRole {
  userId: number
  userName: string
  orgRole: OrgRole
}

interface EditableOrgRoleProps {
  userOrgRole: UserOrgRole
  onEditUserRole: (value: any) => void
  rolesList: OrgRole[]
}

const EditableOrgRole = ({
  userOrgRole,
  onEditUserRole,
  rolesList
}: EditableOrgRoleProps) => {
  const [isEditing, setIsEditing] = useState(false)
  const [selectedRole, setSelectedRole] = useState({
    id: userOrgRole.orgRole.id,
    name: userOrgRole.orgRole.name
  })

  const handleUserRoleConfirm = () => {
    onEditUserRole({
      userId: userOrgRole.userId,
      userName: userOrgRole.userName,
      orgRole: {
        id: selectedRole.id,
        name: selectedRole.name
      }
    })
    setIsEditing(false)
  }

  const handleOnChange = (value: { value: number; label: React.ReactNode }) => {
    setSelectedRole({
      id: value.value,
      name: value.label as string
    })
  }
  return (
    <>
      {!isEditing && (
        <Typography.Paragraph className='flex-1'>
          {selectedRole.name}
          <EditOutlined
            className='ant-typography-edit ml-3'
            onClick={() => setIsEditing(true)}
          />
        </Typography.Paragraph>
      )}
      {isEditing && (
        <>
          <Select
            style={{ width: 120 }}
            labelInValue
            defaultValue={{
              value: selectedRole.id!,
              label: selectedRole.name!
            }}
            onChange={handleOnChange}
          >
            {rolesList.map((i) => (
              <Option key={i.id} value={i.id}>
                {i.name}
              </Option>
            ))}
          </Select>

          <CheckOutlined
            onClick={() => handleUserRoleConfirm?.()}
            className='mx-3'
            style={{ color: '#18b316' }}
          />
          <CloseOutlined onClick={() => setIsEditing(false)} />
        </>
      )}
    </>
  )
}

const UsersTable: React.FC<{
  users: OrgUser[]
  onDel: (user: OrgUser) => void
  onEditUserRole: (user: UserOrgRole) => void
}> = ({ users, onDel, onEditUserRole }) => {
  const { curOrg } = useCurOrg()
  const { data: rolesRes } = useSWR(`/orgs/${curOrg?.id}/roles`, () =>
    listRoles(curOrg?.id!)
  )

  const rolesList = rolesRes?.data.map((i) => i) || []

  const columns: TableColumnsType<OrgUser> = [
    {
      title: 'Name',
      dataIndex: 'userName',
      key: 'userName'
    },
    {
      title: 'Organization Role',
      dataIndex: 'roleName',
      key: 'roleName',
      render: (val, rec, idx) => {
        const curRole = rolesRes?.data.find(
          (role) => role.name === rec.roleName
        )

        return (
          <EditableOrgRole
            onEditUserRole={onEditUserRole}
            userOrgRole={{
              userId: rec.userID!,
              userName: rec.userName!,
              orgRole: {
                id: curRole?.id,
                name: rec.roleName
              }
            }}
            rolesList={rolesList}
          />
        )
      }
    },
    {
      title: '',
      key: 'action',
      width: 180,
      render: (val, rec, idx) => {
        return (
          <DelConfirmButton
            className='justify-end cc-users-del-confirm-btn invisible'
            onDel={() => onDel(rec)}
          />
        )
      }
    }
  ]

  return (
    <div className='org-users-table border border-solid rounded-lg overflow-hidden border-gray-100'>
      <Table
        columns={columns}
        dataSource={users}
        rowKey='userName'
        pagination={false}
      />
    </div>
  )
}

export default UsersTable