import React, { useEffect, useContext } from 'react';
import { Button, Col, Label, Row } from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import NrContractTermConditionForm from 'src/components/contract-terms-form-nr/nr-contract-terms-condition-form';
import DragAndDrop from 'src/components/shared/drag-and-drop';
import {
    ADD_CONTRACT_TERM_CONDITION,
    REORDER_TERM_CONDITIONS,
    SET_DEFAULT_CONDITION,
} from 'src/constants';
import { ContractTermContext } from 'src/contexts/contract-term-context';

export const NContractTermsConditionsList: React.FC = () => {
    const { state, dispatch } = useContext(ContractTermContext);

    const addConditionRow = () => {
        const priority = state.conditions.length + 1;
        const condition = { contractTermId: state.contractTermId, priority };
        dispatch({ type: ADD_CONTRACT_TERM_CONDITION, condition });
    };

    const dragAndDropCondition = (dragIndex: number, dropIndex: number) => {
        const condition = state.conditions[dragIndex];
        dispatch({
            type: REORDER_TERM_CONDITIONS,
            condition,
            dragIndex,
            dropIndex,
        });
    };

    useEffect(() => {
        if (!isEmpty(state.scheduleIds) && isEmpty(state.conditions))
            dispatch({ type: SET_DEFAULT_CONDITION });
    }, [state.scheduleIds]);

    return (
        <DragAndDrop
            items={state.conditions.map((c: any) => ({ id: c.priority }))}
            onDragEnd={dragAndDropCondition}
        >
            <div className="NrContractTermsConditionsTable">
                <Row className="NrContractTermsConditionsTable-header ">
                    <Col sm="1" />
                    <Col sm="2">
                        <Label text="Term Condition Name" />
                    </Col>
                    <Col sm="2">
                        <Label text="Transaction type" />
                    </Col>
                    <Col sm="2">
                        <Label text="Service" />
                    </Col>
                    <Col sm="2">
                        <Label text="Country" />
                    </Col>
                    <Col sm="2">
                        <Label text={'Commission'} />
                    </Col>
                </Row>
                {state.conditions?.map((condition: any, index: number) => (
                    <NrContractTermConditionForm
                        condition={condition}
                        dragAndDropCondition={dragAndDropCondition}
                        index={index}
                        isDraggable={state.conditions.length > 1}
                        key={`nr-contract-term-condition-${condition.priority}`}
                    />
                ))}
                <Row>
                    <Button
                        className="addBlockButton"
                        onClick={() => addConditionRow()}
                        variant="quartenary"
                    >
                        + NEW TERM LINE
                    </Button>
                </Row>
            </div>
        </DragAndDrop>
    );
};

export default NContractTermsConditionsList;