import {
    WebCellProps,
    WebCell,
    createCell,
    component,
    attribute,
    observer,
    on,
    Fragment
} from 'web-cell';
import { observable } from 'mobx';

import { SubTag } from './SubTag';

export interface TestTagProps extends WebCellProps {
    topic?: string;
}

class State {
    @observable
    status = '';
}

@component({
    tagName: 'test-tag',
    mode: 'open'
})
@observer
export class TestTag extends WebCell<TestTagProps>() {
    @attribute
    @observable
    topic = 'Test';

    state = new State();

    onClick = () => (this.topic = 'Example');

    @on('click', ':host h1')
    onDelegate() {
        this.state.status = 'active';
    }

    render() {
        const { topic } = this,
            { status } = this.state;

        return (
            <>
                <style>
                    {stringifyCSS({
                        '.topic': {
                            color: 'lightblue'
                        },
                        '.topic.active': {
                            color: 'lightpink'
                        }
                    })}
                </style>

                <h1 title={topic} className={`topic ${status}`}>
                    {topic}
                    <img alt={topic} onClick={this.onClick} />

                    <SubTag />
                </h1>
            </>
        );
    }
}