import React from 'react'
import { Button, Image } from 'antd'
import { AppstoreOutlined } from '@ant-design/icons'

export interface GalleryControlCardProps {
    operationEnabled: boolean
    onCheckPermission: () => void
    onGetGallery: () => void
    savedList?: Array<{
        id: string | number
        resolvedUrl?: string
        url?: string
        displayName?: string
    }>
}

export const GalleryControlCard: React.FC<GalleryControlCardProps> = ({
    operationEnabled,
    onCheckPermission: _onCheckPermission,
    onGetGallery,
    savedList
}) => {
    return (
        <>
            <Button
                block
                type="default"
                icon={<AppstoreOutlined />}
                onClick={onGetGallery}
                style={{ background: operationEnabled ? 'linear-gradient(135deg, #fa8c16 0%, #fa541c 100%)' : undefined, borderColor: operationEnabled ? '#fa8c16' : undefined, color: operationEnabled ? 'white' : undefined }}
            >
                获取相册
            </Button>
            {savedList && savedList.length > 0 && (
                <div style={{ marginTop: 8 }}>
                    <div style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>实时保存的图片</div>
                    <div style={{
                        height: 640,
                        overflowY: 'auto',
                        border: '1px solid #f0f0f0',
                        borderRadius: 4,
                        padding: 8
                    }}>
                        <Image.PreviewGroup>
                            <div style={{
                                display: 'grid',
                                gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
                                gap: 8
                            }}>
                                {savedList.map((img) => (
                                    <div key={img.id} style={{ textAlign: 'center' }}>
                                        <Image
                                            src={img.resolvedUrl || img.url}
                                            style={{ width: '70%', borderRadius: 6 }}
                                        />
                                        {img.displayName && (
                                            <div style={{ fontSize: 11, color: '#888', marginTop: 4 }}>
                                                {img.displayName}
                                            </div>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </Image.PreviewGroup>
                    </div>
                </div>
            )}
        </>
    )
}

export default GalleryControlCard


