import React from 'react';
import { Button, Descriptions, Input } from 'antd';
import type { DescriptionsProps } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import { FEEDBACK_RESULT, PREDICTED_RESULT, REVIEWED_RESULT } from './const';

const DocumentCompareInfo = ({ key, data, selectedFileDataSource, updateRevisedByFeedback, handleUpdateFileInField, shouldRevised, disabledInput }) => {
    const items: DescriptionsProps['items'] = [
        {
            key: selectedFileDataSource[data]?.[FEEDBACK_RESULT] || '1',
            label: 'Feedback',
            children: selectedFileDataSource[data]?.[FEEDBACK_RESULT],
            labelStyle: { color: '#333', padding: '4px 16px' },
            contentStyle: { padding: '4px 16px' },
            span: 3
        },
        {
            key: selectedFileDataSource[data]?.[PREDICTED_RESULT] || '2',
            label: 'Predicted',
            children: selectedFileDataSource[data]?.[PREDICTED_RESULT],
            labelStyle: { color: '#333', padding: '4px 16px' },
            contentStyle: { padding: '4px 16px' },
            span: 3
        },
        {
            key: selectedFileDataSource[data]?.[REVIEWED_RESULT] || '3',
            label: 'Revised',
            children: <Input
                style={{ background: shouldRevised ? 'yellow' : '' }}
                value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
                size='small'
                onChange={(e) =>
                    handleUpdateFileInField(data, e.target.value)
                }
                variant="borderless"
                disabled={disabledInput === undefined || disabledInput === 0}
            />,
            labelStyle: { color: '#333', padding: '4px 16px' },
            contentStyle: { padding: '4px 16px' },
            span: 3
        },
    ];
    return (
        <div style={{ margin: '0 0 8px' }} className='file-input-group' key={key}>
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    margin: '0 0 4px',
                }}
            >
                <p style={{ fontWeight: 'bold', margin: 0 }}>{data}</p>
                <Button
                    shape='round'
                    type='primary'
                    ghost
                    icon={<CopyOutlined />}
                    size='small'
                    onClick={() => updateRevisedByFeedback(data)}
                    disabled={disabledInput === undefined || disabledInput === 0}
                />
            </div>
            <Descriptions bordered items={items} layout="horizontal" size='small' contentStyle={{ height: '13px' }} />
        </div>
    )
}

export default DocumentCompareInfo;