import React, { useEffect, useState, useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import UsersActionModal from './users-action-modal'
import UsersList from './users-list'
import Notification from '@/shared/components/notification'
import OLFormGroup from '@/shared/components/ol/ol-form-group'
import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
import OLForm from '@/shared/components/ol/ol-form'
import SelectOwnerForm from '../../../project-list/components/select-owner-form'
import { useUserListContext } from '../../../user-list/context/user-list-context'
import { UserRef } from '../../../../../types/project/api'

type DeleteUserModalProps = Pick<
  React.ComponentProps<typeof UsersActionModal>,
  'users' | 'actionHandler' | 'showModal' | 'handleCloseModal'
>

function DeleteUserModal({
  users,
  actionHandler,
  showModal,
  handleCloseModal,
}: DeleteUserModalProps) {
  const { t } = useTranslation()
  const { loadedUsers } = useUserListContext()

  const [usersToDisplay, setUsersToDisplay] = useState<typeof users>([])
  const [sendEmail, setSendEmail] = useState<boolean>(false)
  const [transferProjects, setTransferProjects] = useState<boolean>(false)
  const [newOwner, setNewOwner] = useState<UserRef | null>(null)

  const selectOwnerInputRef = useRef<HTMLInputElement>(null)

  const potentialOwners = useMemo(() => {
    if (!loadedUsers) return []
    const excludeIds = new Set(users.map(u => u.id))
    return loadedUsers.filter(
      user => !user.deleted && !excludeIds.has(user.id)
    )
  }, [loadedUsers, users])

  useEffect(() => {
    if (showModal) {
      setUsersToDisplay(displayUsers => displayUsers.length ? displayUsers : users)
      setSendEmail(false)
      setTransferProjects(false)
      setNewOwner(null)
    } else {
      setUsersToDisplay([])
    }
  }, [showModal, users])

  useEffect(() => {
    if (transferProjects) {
      selectOwnerInputRef.current?.focus()
    }
  }, [transferProjects])

  const handleSendEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSendEmail(e.currentTarget.checked)
  }

  const handleTransferProjectsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTransferProjects(e.currentTarget.checked)
    if (!e.currentTarget.checked) {
      setNewOwner(null)
    }
  }

  const options = useMemo(() => {
    return {
      sendEmail,
      toUserId: transferProjects && newOwner ? newOwner.id : null,
    }
  }, [sendEmail, transferProjects, newOwner])

  return (
    <UsersActionModal
      action="delete"
      actionHandler={actionHandler}
      title={t('delete_accounts')}
      showModal={showModal}
      handleCloseModal={handleCloseModal}
      users={users}
      options={options}
      actionIsDisabled={transferProjects && !newOwner}
    >
      <p>{t('about_to_delete_accounts')}</p>
      <UsersList users={users} usersToDisplay={usersToDisplay} />
      <Notification
        content={t('this_action_can_be_undone_within_limited_period')}
        type="warning"
      />

      <OLForm className="mt-4">
        <OLFormGroup controlId="send-email-checkbox" className="d-flex">
          <OLFormCheckbox
            autoComplete="off"
            onChange={handleSendEmailChange}
            name="sendEmail"
            label={t('notify_users_about_account_deletion')}
            checked={sendEmail}
            area-label={t('notify_users_about_account_deletion')}
          />
        </OLFormGroup>

        <OLFormGroup controlId="transfer-projects-checkbox" className="mt-3">
          <OLFormCheckbox
            autoComplete="off"
            onChange={handleTransferProjectsChange}
            name="transferProjects"
            label={t('transfer_all_projects_to')}
            checked={transferProjects}
            area-label={t('transfer_all_projects_to')}
          />
        </OLFormGroup>

        {transferProjects && (
          <OLFormGroup className="mt-2">
            <SelectOwnerForm
              ref={selectOwnerInputRef}
              loading={!potentialOwners.length}
              users={potentialOwners}
              value={newOwner}
              onChange={setNewOwner}
            />
          </OLFormGroup>
        )}
      </OLForm>
    </UsersActionModal>
  )
}

export default DeleteUserModal

