import { Copy, Edit, FileText, LayoutTemplate } from 'lucide-react';
import { Button } from 'react-bootstrap';
import { useSelector } from 'react-redux';
import Spinning from './Spinning';

export default function TemplateList({ activeTab }) {
    const { templates, templatesStatus } = useSelector((state) => state.inbox);
    // 如果正在加载，显示加载中
    if (templatesStatus === 'loading') {
        return <Spinning />;
    }
    if (templates.length === 0) {
        return (
            <div className='template-list-empty'>
                <span className='template-list-empty-text'>No templates found</span>
            </div>
        );
    }
    return (
        <div className='template-list'>
            {templates.map((template) => (
                <div className='template-item' key={template.id}>
                    <div className='template-item-name'>
                        <span className='template-item-name-text'>
                            {template.type === 'initial' && (
                                <span className='template-item-name-text-initial'>初步建联</span>
                            )}
                            {template.type === 'bargain' && (
                                <span className='template-item-name-text-bargain'>砍价邮件</span>
                            )}
                            {template.type === 'script' && (
                                <span className='template-item-name-text-script'>脚本邮件</span>
                            )}
                            {template.type === 'cooperation' && (
                                <span className='template-item-name-text-cooperation'>合作追踪</span>
                            )}{' '}
                            - {template.name}
                        </span>
                        <div className='template-item-name-actions'>
                            <Button variant='outline-primary' className='border-0' size='sm'>
                                <Edit size={16} />
                                Edit
                            </Button>
                        </div>
                    </div>
                    <div className='template-item-item template-platform'>
                        <div className='label'>
                            <LayoutTemplate size={20} />
                            Platform
                        </div>
                        <div className='value'>{template.platform}</div>
                    </div>
                    <div className='template-item-item template-service'>
                        <div className='label'>
                            <Copy size={20} />
                            Service
                        </div>
                        <div className='value'>{template.service}</div>
                    </div>
                    <div className='template-item-item template-message'>
                        <div className='label'>
                            <FileText size={20} />
                            Message
                        </div>
                        <div className='value'>{template.message}</div>
                    </div>
                </div>
            ))}
        </div>
    );
}