import React from 'react';
import { Typography, Divider, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import SolutionFieldNew from './SolutionField';

const { Text } = Typography;

const SolutionForm = ({
    solutionForm,
    solutionFields,
    solutionTypes,
    solutionStatuses,
    firstSolutionValid,
    onAddSolutionField,
    onRemoveSolutionField,
    onSolutionTypeChange,
    onSolutionStatusChange,
    checkFirstSolutionValid,
    onSolutionFileUpload,
    onFileView,
    fileList,
    isReadOnly = false,
}) => {
    // console.log('SolutionForm props:', {
    //     solutionFields,
    //     solutionTypes,
    //     solutionStatuses,
    //     firstSolutionValid,
    //     onAddSolutionField: typeof onAddSolutionField,
    //     onRemoveSolutionField: typeof onRemoveSolutionField,
    //     checkFirstSolutionValid: typeof checkFirstSolutionValid,
    //     onSolutionFileUpload: typeof onSolutionFileUpload,
    //     onFileView: typeof onFileView,
    //     fileList: fileList ? fileList.length : 0
    // });

    return (
        <div style={{ marginBottom: 0 }}>
            <Divider orientation="left">Solution Items</Divider>

            <div style={{
                maxHeight: '400px',
                overflowY: 'auto',
                paddingRight: '8px'
            }}>
                {solutionFields.map((field, displayIndex) => (
                    <SolutionFieldNew
                        key={field}
                        fieldKey={field}
                        fieldName={['solution_items', field]}
                        index={displayIndex}
                        solutionType={solutionTypes[field]}
                        solutionStatus={solutionStatuses[field]}
                        onTypeChange={onSolutionTypeChange}
                        onStatusChange={onSolutionStatusChange}
                        onRemove={() => onRemoveSolutionField(field)}
                        onFileUpload={onSolutionFileUpload}
                        onFileView={onFileView}
                        fileList={fileList}
                        isReadOnly={isReadOnly}
                        canRemove={solutionFields.length > 1 && displayIndex > 0}
                    />
                ))}
            </div>

            {!isReadOnly && (
                <div style={{ marginBottom: 8 }}>
                    <Button
                        type="dashed"
                        onClick={onAddSolutionField}
                        icon={<PlusOutlined />}
                        style={{
                            width: '100%',
                            borderColor: '#23A55A',
                            color: '#23A55A',
                            height: '32px',
                            fontSize: '12px'
                        }}
                    >
                        Add More Solution
                    </Button>
                </div>
            )}
        </div>
    );
};

export default SolutionForm;