import { MantineSize, Input } from "@mantine/core";
import { useState, useEffect } from "react";
import { IconCopy, IconCheck } from "@tabler/icons-react";

export interface CopyInputProps {
    value: string;
    caption: string;
    timeout?: number;
    size?: MantineSize;
    fullWidth?: boolean;
    onClick?: () => void;
    style?: React.CSSProperties;
}

export function CopyInput(props : CopyInputProps) {
    const { value, caption, timeout = 1200, size = 'sm', fullWidth = true, onClick, style } = props;
    const [copied, setCopied] = useState(false);

    useEffect(() => {
        if (!copied) return;
        const t = setTimeout(() => setCopied(false), timeout);
        return () => clearTimeout(t);
    }, [copied, timeout]);

    const handleCopy = async () => {
        try {
            await navigator.clipboard.writeText(value);
            setCopied(true);
            onClick?.();
        } catch {
            // noop
        }
    };

    return (
        <div onClick={handleCopy} style={{ width: fullWidth ? '100%' : undefined, cursor: 'pointer' }}>
            <Input
                size={size}
                value={value}
                readOnly
                disabled
                rightSection={copied ? <IconCheck size={16} color="#2fb344" /> : <IconCopy size={16} />}
                rightSectionPointerEvents={"none"}
                placeholder={caption}
                style={{
                    pointerEvents: 'none',
                    transition: 'background-color 160ms ease, box-shadow 160ms ease',
                    //boxShadow: copied ? '0 0 0 1px rgba(47, 179, 68, 0.4) inset' : undefined,
                    ...style,
                }}
                styles={{
                    input: {
                        backgroundColor: copied ? 'rgba(0, 255, 0, 0.15)' : undefined,
                        border: copied ? '1px solid #2fb344' : undefined,
                        color: copied ? '#2fb344' : undefined,
                    }
                }}
            />
        </div>
    );
}