import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { Button } from 'antd'

import { useWell } from '@asb/context'
import { UserView } from '@components/views'
import DownloadLink from '@components/DownloadLink'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { makeColumn, makeDateColumn, makeTextColumn, Table } from '@components/Table'
import { WellFinalDocumentsService } from '@api'
import { MimeTypes, wrapPrivateComponent } from '@utils'

import WellCaseEditor from './WellCaseEditor'
import { HistoryTable } from './HistoryTable'
import UploadForm from '@asb/components/UploadForm'

const expandable = {
    expandedRowRender: (category) => (
        <HistoryTable category={category} />
    )
}

const WellCase = memo(() => {
    const [isLoading, setIsLoading] = useState(false)
    const [categories, setCategories] = useState([])
    const [canEdit, setCanEdit] = useState(false)
    const [showEdit, setShowEdit] = useState(false)

    const [well] = useWell()

    const updateTable = useCallback(() => {
        invokeWebApiWrapperAsync(
            async () => {
                const { permissionToSetPubliher, wellFinalDocuments } = await WellFinalDocumentsService.get(well.id)

                setCategories(wellFinalDocuments.map((cat) => ({ ...cat, uploadDate: cat.file?.uploadDate })))
                setCanEdit(permissionToSetPubliher)
            },
            setIsLoading,
            'Не удалось загрузить список категорий',
            { actionName: 'Загрузка списка категорий', well }
        )
    }, [well])

    const columns = useMemo(() => [
        makeTextColumn('Категория', 'nameCategory'),
        makeColumn('Файл', 'file', {
            render: (file, category) => (
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                    {file ? (
                        <DownloadLink file={file} />
                    ) : (
                        <span style={{ marginLeft: 15 }}>Файл не загружен</span>
                    )}
    
                    {category.permissionToUpload && (
                        <UploadForm
                            url={`/api/WellFinalDocuments/${well.id}?idCategory=${category.idCategory}`}
                            onUploadStart={() => setIsLoading(true)}
                            onUploadComplete={updateTable}
                            onUploadError={() => setIsLoading(false)}
                        />
                    )}
                </div>
            ),
        }),
        makeDateColumn('Дата загрузки', 'uploadDate'),
        makeColumn('Ответственные', 'publishers', {
            render: (publishers) => publishers?.map((user) => (
                <UserView user={user} />
            )),
        }),
    ], [well, updateTable])

    const onEditClose = useCallback((changed = false) => {
        setShowEdit(false)
        if (changed) updateTable()
    }, [updateTable])

    useEffect(updateTable, [updateTable])

    return (
        <>
            <LoaderPortal show={isLoading}>
                {canEdit && (
                    <Button onClick={() => setShowEdit(true)}>Редактировать</Button>
                )}
                <Table
                    bordered
                    size={'small'}
                    dataSource={categories}
                    columns={columns}
                    expandable={expandable}
                />
            </LoaderPortal>
            <WellCaseEditor categories={categories} show={showEdit} onClose={onEditClose} />
        </>
    )
})

export default wrapPrivateComponent(WellCase, {
    title: 'Дело скважины',
    route: 'well_case',
    requirements: [],
    // requirements: ['WellFinalDocuments.get'],
})