// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html

import * as cc from "cc";
import cp_palette, { cp_palette_hsv } from "./cp_palette";
import cp_palette_util from "./cp_palette_util";

const { ccclass, property } = cc._decorator;

@ccclass
export default class cp_palette_color_main extends cc.Component {

    cp_palette: cp_palette = null;

    @property(cc.Sprite)
    sprite: cc.Sprite = null;

    @property(cc.Node)
    cursor: cc.Node = null;

    @property(cc.Node)
    cursor_sprite: cc.Node = null;

    protected onLoad(): void {
        this.node.on(cc.Node.EventType.TOUCH_START, this.on_touch_start, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);
    }

    protected onDestroy(): void {
        this.node.targetOff(this);
    }

    on_touch_start(event: cc.EventTouch) {
        const pos_location = event.getUILocation();
        const ui = this.node.getComponent(cc.UITransform);
        let pos_event = ui.convertToNodeSpaceAR(cc.v3(pos_location.x, pos_location.y, 0));
        let x = pos_event.x;
        let y = pos_event.y;

        this.cursor.setPosition(x, y);
        this.update_color();
    }

    on_touch_move(event: cc.EventTouch) {
        const pos = this.cursor.getPosition();
        let x = pos.x + event.getDeltaX();
        let y = pos.y + event.getDeltaY();
        this.cursor.setPosition(x, y);
        this.update_color();
    }

    update_color() {

        const ui = this.node.getComponent(cc.UITransform);
        const pos = this.cursor.getPosition();
        let x = Math.max(pos.x, 0);
        x = Math.min(x, ui.width);
        let y = Math.max(pos.y, 0);
        y = Math.min(y, ui.height);
        this.cursor.setPosition(x, y);

        let h = this.cp_palette.get_hsv().h;
        let s = x / ui.width;
        let v = y / ui.height;
        this.cp_palette.set_hsv(h, s, v);
        this.cp_palette.update_render_from_main();

        this.update_cursor_sprite();
    }

    update_sprite() {
        let grid = [];
        let len = this.cp_palette.density;
        let h = this.cp_palette.get_hsv().h;
        let s = 0;
        let v = 0;
        let dif = 1 / (len - 1);

        for (let y = 0; y < len; y++) {
            grid[y] = [];
            s = 0;
            for (let x = 0; x < len; x++) {
                grid[y].push(cp_palette_util.get_rgba_arr(h, s, v));
                s += dif;
            }
            v += dif;
        }
        // console.log(grid);
        this.sprite.spriteFrame = cp_palette_util.grid2SpriteFrame(grid, len, len);
    }

    update_cursor_sprite() {
        let h = this.cp_palette.get_hsv().h;
        let v = this.cursor.getPosition().y / this.node.getComponent(cc.UITransform).height;
        this.cursor_sprite.getComponent(cc.Sprite).color = this.cursor_sprite.getComponent(cc.Sprite).color.fromHSV(0, 0, Math.abs(1 - v));
    }

    update_cursor() {
        const { h, s, v } = this.cp_palette.get_hsv();

        let len = this.cp_palette.density;
        let dif = 1 / (len);

        let y = Math.round(v / dif);
        let x = Math.round(s / dif);

        let ui = this.node.getComponent(cc.UITransform);
        let width = ui.width / len;
        let height = ui.height / len;
        this.cursor.setPosition(width * (x + 0.5), height * (y + 0.5));

        this.update_cursor_sprite();
        // console.log("main", x, y);
    }
}
