import * as React from 'react';
import { ClickOutside } from './ClickOutside';
import { Card } from '..';
import { PrimaryButton } from '..';

interface IClickOutsidePreviewState {
    outsideClicks: string[],
}

export class ClickOutsidePreview extends React.Component<{}, IClickOutsidePreviewState> {
    public state: IClickOutsidePreviewState = {
        outsideClicks: [],
    };

    public onTrigger = (event: Event, isClick: boolean) => {
        const el = event.target as Element;
        const message = `${isClick ? 'clicked on' : 'escape'} ${el.id || el.className || 'An outside element'}`;

        this.setState((prevState => ({
            outsideClicks: prevState.outsideClicks.concat([message]),
        })));
    };

    public render() {
        const { outsideClicks } = this.state;

        return (
            <>
                <ClickOutside onTrigger={this.onTrigger}>
                    <Card>
                        <h4>Outside clicks</h4>
                        <ul>{
                            outsideClicks.map((click, i) => (
                                <li key={i}>
                                    {click}
                                </li>
                            ))
                        }</ul>
                    </Card>
                </ClickOutside>
                <PrimaryButton id="PrimaryButton1">
                    I am outside
                </PrimaryButton>
            </>
        );
    }
}