import React, { useEffect, useMemo, useState } from 'react';
import { Button } from '@/components/elements/button/index';
import { Image } from './styles';
import { ImageViewerProps } from './types';
import { themeColors } from '../colorExtractor';

const MIN_ZOOM = 0.25;
const MAX_ZOOM = 4;
const ZOOM_STEP = 0.25;

const ImageViewer: React.FC<ImageViewerProps> = ({ src, alt }) => {
    const [zoom, setZoom] = useState(1);

    useEffect(() => {
        setZoom(1);
    }, [src]);

    const checkerboardStyle = useMemo<React.CSSProperties>(() => ({
        backgroundColor: themeColors.page.background,
        backgroundImage: [
            `linear-gradient(45deg, ${themeColors.page.secondary} 25%, transparent 25%)`,
            `linear-gradient(-45deg, ${themeColors.page.secondary} 25%, transparent 25%)`,
            `linear-gradient(45deg, transparent 75%, ${themeColors.page.secondary} 75%)`,
            `linear-gradient(-45deg, transparent 75%, ${themeColors.page.secondary} 75%)`,
        ].join(', '),
        backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0',
        backgroundSize: '16px 16px',
    }), []);

    const setClampedZoom = (value: number) => {
        setZoom(Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value)));
    };

    const imageStyle: React.CSSProperties = zoom <= 1
        ? {
            maxWidth: `${zoom * 100}%`,
            maxHeight: `${zoom * 100}%`,
        }
        : {
            width: `${zoom * 100}%`,
            maxWidth: 'none',
            maxHeight: 'none',
        };

    const controlClassName = '!bg-transparent hover:!bg-transparent active:!bg-transparent !shadow-none border-0 text-neutral-400 hover:text-neutral-100';

    return (
        <div className="relative flex-1 min-h-0 min-w-0 w-full max-w-full overflow-hidden">
            <div
                className="absolute left-0 right-0 top-0 z-10 flex h-8 items-center gap-1 border-b px-3"
                style={{
                    backgroundColor: themeColors.page.background,
                    borderColor: themeColors.page.secondaryHover,
                    color: themeColors.page.primary,
                }}
            >
                <Button.Text
                    type="button"
                    title="Zoom out"
                    size={Button.Sizes.Small}
                    shape={Button.Shapes.IconSquare}
                    className={controlClassName}
                    onClick={() => setClampedZoom(zoom - ZOOM_STEP)}
                >
                    <span className="text-sm leading-none">-</span>
                </Button.Text>
                <Button.Text
                    type="button"
                    title="Reset zoom"
                    size={Button.Sizes.Small}
                    className="!bg-transparent hover:!bg-transparent active:!bg-transparent !shadow-none border-0 px-2 text-[11px] text-neutral-300 hover:text-neutral-100"
                    onClick={() => setZoom(1)}
                >
                    {Math.round(zoom * 100)}%
                </Button.Text>
                <Button.Text
                    type="button"
                    title="Zoom in"
                    size={Button.Sizes.Small}
                    shape={Button.Shapes.IconSquare}
                    className={controlClassName}
                    onClick={() => setClampedZoom(zoom + ZOOM_STEP)}
                >
                    <span className="text-sm leading-none">+</span>
                </Button.Text>
                <span className="ml-4 text-[11px] text-neutral-500 truncate">{alt.split('/').pop()}</span>
            </div>
            <div className="absolute inset-0 max-w-full overflow-auto pt-8" style={checkerboardStyle}>
                <div className="flex min-h-full min-w-full items-center justify-center p-6">
                    <Image src={src} alt={alt} draggable={false} style={imageStyle} />
                </div>
            </div>
        </div>
    );
};

export default ImageViewer;