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

const { Text } = Typography;

const SolutionForm = ({
    solutionForm,
    solutionFields,
    solutionTypes,
    solutionStatuses,
    fileList,
    solutionsToDelete,
    firstSolutionValid,
    onAddSolutionField,
    onRemoveSolutionField,
    onSolutionTypeChange,
    onSolutionStatusChange,
    onSolutionFileUpload,
    onFileView,
    isReadOnly = false,
    onAddSolution,
}) => {
    return (
        <div>
            <Form
                form={solutionForm}
                layout="vertical"
                initialValues={{
                    solution_status_0: true,
                    solution_type_0: 'text',
                }}
            >
                <Divider orientation="left">Solution Items</Divider>

                {solutionFields.map((field, index) => (
                    <SolutionFieldNew
                        key={field.key}
                        fieldKey={field.key}
                        fieldName={field.name}
                        index={index}
                        solutionType={solutionTypes[field.key]}
                        solutionStatus={solutionStatuses[field.key]}
                        onTypeChange={onSolutionTypeChange}
                        onStatusChange={onSolutionStatusChange}
                        onRemove={() => onRemoveSolutionField(field.key)}
                        onFileUpload={onSolutionFileUpload}
                        onFileView={onFileView}
                        fileList={fileList}
                        isReadOnly={isReadOnly}
                        canRemove={solutionFields.length > 1}
                    />
                ))}

                {!isReadOnly && (
                    <>
                        <Form.Item>
                            <Button
                                type="dashed"
                                onClick={onAddSolutionField}
                                icon={<PlusOutlined />}
                                style={{ width: '100%' }}
                            >
                                + Add Solution
                            </Button>
                        </Form.Item>
                        <div style={{ marginTop: 16 }}>
                            <Text type="secondary">
                                * At least one solution is required for each error code.
                            </Text>
                        </div>
                    </>
                )}
            </Form>
        </div>
    );
};

export default SolutionForm;