import * as React from 'react';
import { cloneChoice, getMmuiFirstCheckedDropChoice } from './utils';
import { MmuiDropChoiceComponent, Props } from './MmuiDropChoiceComponent';

export interface MmuiDropChoiceSingleProps extends Props {
}

export class MmuiDropChoiceSingleComponent<
    P extends MmuiDropChoiceSingleProps
> extends MmuiDropChoiceComponent<P> {
    /**
     * Constructor
     * @param props
     *
     */
    constructor(props: P) {
        super(props);
    }

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    removeToken(choiceId) {
        return;
    }

    getCheckedChoice() {
        return getMmuiFirstCheckedDropChoice(this.state.choices);
    }

    updateChoice(changedChoice) {
        let choice,
            newChoice,
            newChoices = [],
            childChoice,
            newChildChoice;

        for (let p = 0; p < this.state.choices.length; p++) {
            choice = this.state.choices[p];
            newChoice = cloneChoice(choice);
            if (choice.children && choice.children.length > 0) {
                newChoice.children = [];
                for (let c = 0; c < choice.children.length; c++) {
                    childChoice = choice.children[c];
                    newChildChoice = cloneChoice(childChoice);
                    newChildChoice.isChecked =
                        newChildChoice.id == changedChoice.id;
                    newChoice.children.push(newChildChoice);
                }
            } else {
                newChoice.isChecked = newChoice.id == changedChoice.id;
            }

            newChoices.push(newChoice);
        }

        this.setState({
            choices: newChoices,
        });
    }

    applyFilter(filterValue: string) {
        let choice,
            newChoice,
            newChoices = [],
            childChoice,
            newChildChoice,
            hasVisibleChildren;

        for (let p = 0; p < this.state.choices.length; p++) {
            choice = this.state.choices[p];
            newChoice = cloneChoice(choice);
            if (choice.children && choice.children.length > 0) {
                newChoice.children = [];
                hasVisibleChildren = false;
                for (let c = 0; c < choice.children.length; c++) {
                    childChoice = choice.children[c];
                    newChildChoice = cloneChoice(childChoice);

                    if (filterValue) {
                        newChildChoice.isVisible = newChildChoice.display
                            .toLowerCase()
                            .includes(filterValue.toLowerCase());
                    } else {
                        newChildChoice.isVisible = true;
                    }

                    hasVisibleChildren =
                        hasVisibleChildren || newChildChoice.isVisible;
                    newChoice.children.push(newChildChoice);
                }

                newChoice.isVisible = hasVisibleChildren;
            } else {
                if (filterValue) {
                    newChoice.isVisible = newChoice.display
                        .toLowerCase()
                        .includes(filterValue.toLowerCase());
                } else {
                    newChoice.isVisible = true;
                }
            }

            newChoices.push(newChoice);
        }

        this.setState({
            choices: newChoices,
        });
    }

    /**
     * Build the summary of selected choices using just text.
     */
    getTextSummaryRender() {
        let choice,
            childChoice,
            textSummaryDisplay = this.state.title,
            hasSummary = false;
        for (let p = 0; p < this.state.choices.length; p++) {
            choice = this.state.choices[p];
            if (choice.children && choice.children.length > 0) {
                for (let c = 0; c < choice.children.length; c++) {
                    childChoice = choice.children[c];
                    if (childChoice.isChecked) {
                        textSummaryDisplay = childChoice.display;
                        hasSummary = true;
                        break;
                    }
                }

                if (hasSummary) {
                    break;
                }
            } else if (choice.isChecked) {
                textSummaryDisplay = choice.display;
                break;
            }
        }

        return (
            <div className="mmui-drop-select-title">{textSummaryDisplay}</div>
        );
    }

    getTokenSummaryRender() {
        return this.getTextSummaryRender();
    }

    renderChoiceInput(choice) {
        const choiceInputProps: any = {
                id: choice.id,
                name: choice.name,
                value: choice.value,
                checked: choice.isChecked,
            },
            choiceStyle: any = { display: 'block' };
        if (choice.isParent) {
            choiceInputProps['data-isparent'] = 'true';
        } else {
            choiceInputProps['data-parentid'] = choice.parentValue;
        }

        if (!choice.isVisible) {
            choiceStyle.display = 'none';
        }

        return (
            <div key={choice.id} style={choiceStyle}>
                <div className="form-check mmui-form-check d-flex">
                    <input
                        className="form-check-input"
                        type="radio"
                        {...choiceInputProps}
                        data-display={choice.display}
                        onChange={this.onChoiceChange}
                    />
                    <label
                        className="form-check-label mmui-form-check-label"
                        htmlFor={choice.id}
                    >
                        {choice.display}
                    </label>
                </div>
            </div>
        );
    }

    renderChoice(choice) {
        if (choice.children) {
            let parentHeader,
                childChoiceRenders = choice.children.map((childChoice) => {
                    return this.renderChoiceInput(childChoice);
                });

            if (choice.isVisible) {
                parentHeader = <span>{choice.display}</span>;
            }

            return (
                <>
                    {parentHeader}
                    <div className="mmui-pl-3">{childChoiceRenders}</div>
                </>
            );
        }

        return this.renderChoiceInput(choice);
    }
}