import { Link, useNavigate, useParams } from 'react-router-dom'
import { memo, useCallback, useEffect, useState } from 'react'
import { InfoCircleFilled, CloseCircleOutlined } from '@ant-design/icons'
import { Button, Result, Typography } from 'antd'

import { downloadFile, invokeWebApiWrapperAsync } from '@components/factory'
import { wrapPrivateComponent } from '@utils'
import { FileService, WellService } from '@api'

const { Paragraph, Text } = Typography

export const getLinkToFile = (fileInfo) => `/file_download/${fileInfo.idWell}/${fileInfo.id}`

const FileDownload = memo(function FileDownload() {
    const { idWell, idFile } = useParams()
    const [well, setWell] = useState({})
    const [file, setFile] = useState({})
    const [isError, setIsError] = useState(false)

    const navigate = useNavigate()

    useEffect(() => {
        invokeWebApiWrapperAsync(
            async () => setWell(await WellService.get(idWell)),
            null,
            'Не удалось получить информацию о скважине',
            { actionName: 'Получение данных о скважине' }
        )
    }, [idWell])

    useEffect(() => {
        invokeWebApiWrapperAsync(
            async () => {
                const files = await FileService.getFilesInfo(idWell)
                // TODO Получается только одна категория файлов.
                // Поменять при появлении метода получения инфы о конкретном файле
                setFile(files.items.find((file) => file.id === idFile) ?? { id: idFile, idWell, name: `File_${idWell}_${idFile}` })
            },
            null,
            () => {
                setIsError(true)
                return 'Не удалось получить информацию о файле'
            },
            { actionName: 'Получение информации о файле' }
        )
    }, [idWell, idFile])

    const download = useCallback(async () => {
        if (!await downloadFile(file))
            setIsError(true)
    }, [file])
    

    return (
        <Result
            icon={<InfoCircleFilled style={{ color: '#1890ff' }} />}
            title={(
                <>
                    Вы перешли к странице загрузки файла!
                    <br />
                    Файл "{file.name ?? ('№' + idFile)}", скважина "{well.caption ?? ('№' + idWell)}".
                </>
            )}
            // subTitle={}
            extra={(
                <>
                    <Button type={'ghost'} onClick={() => navigate('/')}>Вернуться на главную</Button>
                    <Button type={'primary'} onClick={download}>Загрузить</Button>
                </>
            )}
        >
            {isError && (
                <div className={'desc'}>
                    <Paragraph>
                        <Text strong style={{ fontSize: 16 }}>Возможные причины ошибки при попытке скачивания файла:</Text>
                    </Paragraph>
                    <Paragraph>
                        <CloseCircleOutlined style={{ color: 'red' }} />
                        &nbsp;У вас отсутствует доступ к файлу.&nbsp;
                        <Typography.Link href={'mailto://support@digitaldrilling.ru'} target={'_blank'}>
                            Обратиться в поддержку &gt;
                        </Typography.Link>
                    </Paragraph>
                    <Paragraph>
                        <CloseCircleOutlined style={{ color: 'red' }} />
                        &nbsp;Файла не существует.&nbsp;
                        <Link to={'#'} onClick={() => navigate(-1)}>Вернуться назад &gt;</Link>
                    </Paragraph>
                    <Paragraph>
                        <CloseCircleOutlined style={{ color: 'red' }} />
                        &nbsp;Разрешения не обновились.&nbsp;
                        <Link to={'/login'}>Перезайти в аккаунт &gt;</Link>
                    </Paragraph>
                </div>
            )}
        </Result>
    )
})

FileDownload.displayName = 'FileDownloadMemo'

export default wrapPrivateComponent(FileDownload, {
    requirements: ['File.get'],
    route: 'file_download/:idWell/:idFile/*',
})