import { html, css } from 'lit';
import { STYLES } from '../styles';
import { Styles } from '../types/types';
import OlComponent from './OlComponent'

export default class ColorComponent extends OlComponent {
    onClick: (value: Styles["color"]) => void;
    colors: string[];
    constructor(onClick: (value: Styles["color"]) => void) {
        super();
        this.onClick = onClick;
        this.colors = STYLES.color
    }

    override styles = css`

    @keyframes grow {
        0% {
            transform: translateY(-50%) translateX(50%) scale(0);
        }

        90% {
            transform: translateY(-50%) translateX(50%) scale(1.1);
        }

        100% {
            transform: translateY(-50%) translateX(50%) scale(1);
        }
      }

    .color-buttons {
        position: absolute;
        overflow: hidden;
        width: 180px;
        height: 180px;
        background: white;
        top: 50%;
        right: 50%;
        transform: translateY(-50%) translateX(50%) scale(1);
        box-shadow: 0 0 2px 2px rgba(0,0,0, .2);
        border-radius: 50%;
        transition: all .3s ease 0.3s;
        border: 2px solid whitesmoke;
        animation: .3s ease-in-out 0s 1 grow;
    }
    .color-buttons button {
        height: 90px;
        width: 120px;
        border-radius: 0;
        border-top-right-radius: 20px;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 50%;
        transform: translateY(-50%) translateX(50%);
        transform-origin: 100% 100%;
        border: 2px solid whitesmoke;

    }
    .color-buttons button:hover {
        box-shadow: 2px 2px 3px 2px rgba(0,0,0,.1);
    }
`

    renderComponents() {
        const numComponents = this.colors.length;
        const angle = 360 / numComponents;
        const rotations = Object.keys(this.colors).map((_, i) => angle * (i + 1));

        return this.colors.map((key, i) => {
            return html`
                <button style="background:${key}; transform: rotate(${rotations[i]}deg) skew(${90 - angle}deg); z-index: ${i}" @click=${() => this.onClick(key as Styles["color"])} part="button"></button>
                `
        })
    }

    override render() {
        return (
            html`
            <style>${this.styles}</style>
            <div class="color-buttons">
                ${this.renderComponents()}
            </div>`
        )
    }
}