import type { CardProps } from '@mui/material/Card';
import type { IconifyName } from 'src/components/iconify';

import { useState } from 'react';
import { varAlpha } from 'minimal-shared/utils';

import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Card from '@mui/material/Card';
import Typography from '@mui/material/Typography';

import { Doc } from 'src/services/document-service';

import { Iconify } from 'src/components/iconify';
import { SvgColor } from 'src/components/svg-color';

import DocFullView from './view/doc-full-view';
// ----------------------------------------------------------------------

export function DocItem({
    sx,
    doc,
    long,
    large,
    ...other
}: CardProps & {
    doc: Doc;
    long: boolean;
    large: boolean;
}) {
    //#region render Avatar
    // const renderAvatar = (
    //     <Avatar
    //         alt={doc.addedWho}
    //         src={doc.addedWho}
    //         sx={{
    //             left: 24,
    //             zIndex: 9,
    //             bottom: -24,
    //             position: 'absolute',
    //             ...((large || long) && {
    //                 top: 24,
    //             }),
    //         }}
    //     />
    // );
    //#endregion

    const [openViewDoc, setOpenViewDoc] = useState(false);

    const renderTitle = (
        <Link
            color="inherit"
            variant="subtitle2"
            underline="hover"
            sx={{
                height: 44,
                overflow: 'hidden',
                WebkitLineClamp: 2,
                display: '-webkit-box',
                WebkitBoxOrient: 'vertical',
                ...(large && { typography: 'h5', height: 60 }),
                ...((large || long) && {
                    color: 'common.white',
                }),
            }}
        >
            {doc.name}
        </Link>
    );

    const renderInfo = (
        <Box
            sx={{
                mt: 3,
                gap: 1.5,
                display: 'flex',
                flexWrap: 'wrap',
                color: 'text.disabled',
                justifyContent: 'flex-start',
            }}
        >
            {[
                { data: doc.addedWho, icon: 'mdi:user' },
                { data: doc.getChangedInfo(', '), icon: 'material-symbols:change-circle-rounded' }
            ].filter(info => info.data).map((info, _index) => (
                <Box
                    key={_index}
                    sx={{
                        display: 'flex',
                        ...((large || long) && {
                            opacity: 0.64,
                            color: 'common.white',
                        }),
                    }}
                >
                    <Iconify width={16} icon={info.icon as IconifyName} sx={{ mr: 0.5 }} />
                    <Typography variant="caption">{info.data?.toString()}</Typography>
                </Box>
            ))}
        </Box>
    );

    const renderCover = (
        <Box
            component="img"
            alt={doc.name}
            src={doc.iconSrc}
            onError={(e) => {
                e.currentTarget.onerror = null;
                e.currentTarget.src = 'assets/icons/file/unknown.svg';
            }}
            sx={{
                top: 0,
                width: 1,
                height: 1,
                objectFit: 'cover',
                position: 'absolute',
            }}
        />
    );

    const renderDate = (
        <Typography
            variant="caption"
            component="div"
            sx={{
                mb: 1,
                color: 'text.disabled',
                ...((large || long) && {
                    opacity: 0.48,
                    color: 'common.white',
                }),
            }}
        >
            {doc.addedWhen.toLocaleDateString('de-DE')}
        </Typography>
    );

    const renderShape = (
        <SvgColor
            src="/assets/icons/shape-avatar.svg"
            sx={{
                left: 0,
                width: 88,
                zIndex: 9,
                height: 36,
                bottom: -16,
                position: 'absolute',
                color: 'background.paper',
                ...((large || long) && { display: 'none' }),
            }}
        />
    );

    sx ??= {
        cursor: 'pointer',
        transition: 'transform 0.3s ease, box-shadow 0.3s ease',
        '&:hover': {
            transform: 'scale(1.03)',
            boxShadow: 6,
        }
    }

    return (
        <>
            <DocFullView data={doc.data} open={openViewDoc} handleClose={() => setOpenViewDoc(false)} format={doc.extension} />
            <Card sx={sx} {...other} onClick={() => setOpenViewDoc(true)}>
                <Box
                    sx={(theme) => ({
                        position: 'relative',
                        pt: 'calc(100% * 3 / 4)',
                        ...((large || long) && {
                            pt: 'calc(100% * 4 / 3)',
                            '&:after': {
                                top: 0,
                                content: "''",
                                width: '100%',
                                height: '100%',
                                position: 'absolute',
                                bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72),
                            },
                        }),
                        ...(large && {
                            pt: {
                                xs: 'calc(100% * 4 / 3)',
                                sm: 'calc(100% * 3 / 4.66)',
                            },
                        }),
                    })}
                >
                    {renderShape}
                    {renderCover}
                </Box>

                <Box
                    sx={(theme) => ({
                        p: theme.spacing(6, 3, 3, 3),
                        ...((large || long) && {
                            width: 1,
                            bottom: 0,
                            position: 'absolute',
                        }),
                    })}
                >
                    {renderDate}
                    {renderTitle}
                    {renderInfo}
                </Box>
            </Card>
        </>
    );
}
