import React, { useContext, useEffect } from 'react';
import {
    Col,
    Container,
    Dropdown,
    Label,
    Row,
} from '@theorchard/suite-components';
import { useParams } from 'react-router-dom';
import LabelBaseTermsForm from 'src/components/contract-terms-form/label-base-terms-form';
import ProductBaseTermsForm from 'src/components/contract-terms-form/product-base-terms-form';
import TrackBaseTermsForm from 'src/components/contract-terms-form/track-base-terms-form';
import {
    CONTRACT_TERM_TYPES,
    SET_DEFAULT_CONDITION,
    SET_CONTRACT_TERM_ATTACHMENTS,
    SET_CONTRACT_TERM_TYPE,
    SET_ATTACHMENTS_RELATIONS,
} from 'src/constants';
import { ContractTermContext } from 'src/contexts/contract-term-context';

export const BaseTermsForm = () => {
    const { contractTermId } = useParams<{ contractTermId: string }>();
    const { state, dispatch } = useContext(ContractTermContext);

    const baseTermTypeChangeHandler = (selectedOption: any) => {
        const { value } = selectedOption;
        if (value !== state.termType) {
            dispatch({ type: SET_CONTRACT_TERM_ATTACHMENTS, attachments: [] });
            dispatch({
                type: SET_ATTACHMENTS_RELATIONS,
                attachmentsRelations: null,
            });
            dispatch({ type: SET_CONTRACT_TERM_TYPE, termType: value });
        }
    };

    const baseTypeOptions = [
        { label: 'Label', value: CONTRACT_TERM_TYPES.LABEL },
        { label: 'Product', value: CONTRACT_TERM_TYPES.PRODUCT },
        { label: 'Track', value: CONTRACT_TERM_TYPES.TRACK },
    ];

    useEffect(() => {
        if (state.attachments.length > 0 && state.conditions.length === 0)
            dispatch({ type: SET_DEFAULT_CONDITION });
    }, [state.attachments]);

    return (
        <div className="ContractTermsForm-block">
            <h2>Base Terms</h2>
            <Container>
                <Row className="BaseRateHorizontalRow">
                    <Col sm={2}>
                        <Label text="Type" />
                    </Col>
                    <Col sm={5}>
                        <Dropdown
                            isDisabled={!!contractTermId}
                            placeholder="Selects"
                            options={baseTypeOptions}
                            selectedValue={state.termType}
                            onChange={baseTermTypeChangeHandler}
                        />
                    </Col>
                </Row>
                {state.termType === CONTRACT_TERM_TYPES.LABEL && (
                    <LabelBaseTermsForm />
                )}
                {state.termType === CONTRACT_TERM_TYPES.PRODUCT && (
                    <ProductBaseTermsForm />
                )}
                {state.termType === CONTRACT_TERM_TYPES.TRACK && (
                    <TrackBaseTermsForm />
                )}
            </Container>
        </div>
    );
};

export default BaseTermsForm;