import React, { useContext, useState } from 'react';
import { Button, Col, Label, Row } from '@theorchard/suite-components';
import { AbacusContractType } from 'src/apollo/definitions/globalTypes';
import ContractTermConditionForm from 'src/components/contract-terms-form/contract-term-condition-form';
import { CopyTermConditionsFormPopup } from 'src/components/contract-terms-form-nr/copy-term-conditions-form-popup';
import DragAndDrop from 'src/components/shared/drag-and-drop';
import {
    ADD_CONTRACT_TERM_CONDITION,
    REORDER_TERM_CONDITIONS,
} from 'src/constants';
import { ContractTermContext } from 'src/contexts/contract-term-context';
import type { AbacusDistroContractTermCondition } from 'src/types/abacus-contract-term';

export const ContractTermConditionsList = ({
    portalElement,
    newConditionLabel = '+ NEW TERM LINE',
    showActionColumn = false,
    highlightInvalidRate = false,
}: {
    portalElement?: HTMLElement;
    newConditionLabel?: string;
    showActionColumn?: boolean;
    highlightInvalidRate?: boolean;
} = {}) => {
    const { state, dispatch } = useContext(ContractTermContext);
    const [isCopyConditionsModalOpen, setIsCopyConditionsModalOpen] =
        useState(false);

    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,
        });
    };

    return (
        <DragAndDrop
            items={state.conditions.map(
                (c: AbacusDistroContractTermCondition) => ({ id: c.priority })
            )}
            onDragEnd={dragAndDropCondition}
        >
            <div className="ContractTermsConditionsTable">
                <Row className="ContractTermsConditionsTable-header ">
                    <Col sm="1">{showActionColumn && <Label text="#" />}</Col>
                    <Col sm="3">
                        <Label text="Transaction type" />
                    </Col>
                    <Col sm="3">
                        <Label text="Service" />
                    </Col>
                    <Col sm={showActionColumn ? '2' : '3'}>
                        <Label text="Country" />
                    </Col>
                    {showActionColumn ? (
                        <>
                            <Col sm="2">
                                <Label text={"Label's share"} />
                            </Col>
                            <Col sm="1" />
                        </>
                    ) : (
                        <Col sm="2">
                            <Label text={"Label's share"} />
                        </Col>
                    )}
                </Row>
                {state.conditions.map(
                    (
                        condition: AbacusDistroContractTermCondition,
                        index: number
                    ) => (
                        <ContractTermConditionForm
                            condition={condition}
                            dragAndDropCondition={dragAndDropCondition}
                            index={index}
                            isDraggable={state.conditions.length > 1}
                            key={`contract-term-condition-${condition.priority}`}
                            portalElement={portalElement}
                            showActionColumn={showActionColumn}
                            highlightInvalidRate={highlightInvalidRate}
                        />
                    )
                )}
                <Row>
                    <Col>
                        <Button
                            className="addBlockButton"
                            onClick={addConditionRow}
                            variant="quartenary"
                        >
                            {newConditionLabel}
                        </Button>
                    </Col>
                    <Col>
                        <Button
                            className="ContractTermsConditionsTable-copy-conditions"
                            onClick={() => setIsCopyConditionsModalOpen(true)}
                            variant="quartenary"
                        >
                            COPY CONDITIONS FROM...
                        </Button>
                        <CopyTermConditionsFormPopup
                            contractType={AbacusContractType.DISTRIBUTION}
                            isCopyConditionsModalOpen={
                                isCopyConditionsModalOpen
                            }
                            setIsCopyConditionsModalOpen={
                                setIsCopyConditionsModalOpen
                            }
                        />
                    </Col>
                </Row>
            </div>
        </DragAndDrop>
    );
};

export default ContractTermConditionsList;