import { memo, ReactNode } from 'react'
import { Link, LinkProps } from 'react-router-dom'
import { FileWordOutlined } from '@ant-design/icons'

import { FileInfoDto } from '@api'
import { downloadFile } from './factory'

import { getLinkToFile } from '@pages/FileDownload'

import '@styles/index.css'

export type DownloadLinkProps = LinkProps & {
    file?: FileInfoDto
    name?: string
    icon?: ReactNode
}

export const DownloadLink = memo<DownloadLinkProps>(({
    className = '',
    file,
    name,
    icon = <FileWordOutlined />,
    ...other
}) => (
    <Link
        title={'Чтобы поделиться файлом с другим сотрудником скопируйте ссылку'}
        {...other}
        className={`download-link ${className}`}

        to={getLinkToFile(file)}
        onClick={(e) => {
            if (file)
                downloadFile(file)
            e.preventDefault()
            return false
        }}
    >
        {icon}
        <span style={{ marginLeft: 8 }}>{name ?? file?.name ?? '-'}</span>
    </Link>
))

export default DownloadLink