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

import { useWell } from '@asb/context'
import { UserView } from '@components/views'
import UploadForm from '@components/UploadForm'
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 { wrapPrivateComponent } from '@utils'

import WellCaseEditor from './WellCaseEditor'
import { HistoryTable } from './HistoryTable'

import '@styles/well_case.less'

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 className={'file-cell'}>
                    {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} style={{ marginLeft: 10 }} />),
        }),
    ], [well, updateTable])

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

    useEffect(updateTable, [updateTable])

    return (
        <div className={'well-case-page'}>
            <LoaderPortal show={isLoading}>
                {canEdit && (
                    <Alert
                        type={'info'}
                        className={'customer-block'}
                        showIcon
                        message={'Вам доступно редактирование ответственных.'}
                        action={<Button onClick={() => setShowEdit(true)}>Редактировать</Button>}
                    />
                )}
                <Table
                    bordered
                    size={'small'}
                    columns={columns}
                    pagination={false}
                    dataSource={categories}
                    expandable={expandable}
                />
            </LoaderPortal>
            <WellCaseEditor categories={categories} show={showEdit} onClose={onEditClose} />
        </div>
    )
})

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