import { VoucherKernelContract } from './web3/VoucherKernel.contract';
import { createUIImage, Image, scaleImage } from "./UIUtils";
import * as EthConnect from "../node_modules/eth-connect/esm";


const img_background = new Image( {
    texture: new Texture("images/commit_background.png"),
    width: 712,
    height: 1245
});
const img_commit_btn = new Image( {
    texture: new Texture("images/commit_button.png"),
    width: 660,
    height: 70
});
const img_close_btn = new Image( {
    texture: new Texture("images/btn_close.png"),
    width: 152,
    height: 151
});
const img_item_for_sale = new Image( {
    texture: new Texture("images/item_for_sale.png"),
    width: 580,
    height: 468
});

export class UICommit {
    protected container: UIContainerRect;
    protected itemId: string;
    protected itemPrice: UIText;
    protected itemQuantity: UIText;

    constructor(private parent: UIShape, item_data: {image: Image, title: string, id: string}) {
        this.container = new UIContainerRect(parent);
        this.container.width = '350px';
        this.container.height = '600px';
        this.container.positionX = "200px";
        this.container.positionY = "50px";
        this.container.color = Color4.White();
        // this.container.hAlign = 'center';
        // this.container.vAlign = 'top';
        // this.container.isPointerBlocker = true;
        this.container.visible = false;

        const background = createUIImage(this.container, img_background);
        scaleImage(background, 350, 600);
        // background.positionX = "200px";
        // background.positionY = "50px";

        const closeButton = createUIImage(this.container, img_close_btn);
        scaleImage(closeButton, 36, 36);
        closeButton.positionX = "150px";
        closeButton.positionY = "282px";
        closeButton.isPointerBlocker = true;
        closeButton.onClick = new OnClick((e) => {
            log('click on Close');
            this.hide();
        })

        const itemTitle = new UIText(this.container);
        itemTitle.value = item_data.title;
        itemTitle.color = Color4.Gray();
        itemTitle.fontSize = 30;
        itemTitle.width = "200px";
        itemTitle.height = "40px";
        itemTitle.fontAutoSize = true;
        itemTitle.positionY = "284px";
        itemTitle.positionX = "12px";


        const itemPriceLabel = new UIText(this.container);
        itemPriceLabel.value = 'Price:';
        itemPriceLabel.color = Color4.Black();
        itemPriceLabel.fontSize = 16;
        itemPriceLabel.width = "80px";
        itemPriceLabel.height = "40px";
        itemPriceLabel.positionY = "-220px";
        itemPriceLabel.hTextAlign = 'right';
        itemPriceLabel.positionX = "-10px";

        const itemPrice = new UIText(this.container);
        itemPrice.value = '??????';
        itemPrice.color = Color4.Black();
        itemPrice.fontSize = 16;
        itemPrice.width = "80px";
        itemPrice.height = "40px";
        itemPrice.positionY = "-220px";
        itemPrice.positionX = "80px";
        itemPrice.hTextAlign = 'left';
        this.itemPrice = itemPrice;

        const itemQuantityLabel = new UIText(this.container);
        itemQuantityLabel.value = 'Remaining Stock:';
        itemQuantityLabel.color = Color4.Black();
        itemQuantityLabel.fontSize = 16;
        itemQuantityLabel.width = "80px";
        itemQuantityLabel.height = "40px";
        itemQuantityLabel.positionY = "-190px";
        itemQuantityLabel.hTextAlign = 'right';
        itemQuantityLabel.positionX = "-10px";

        const itemQuantity = new UIText(this.container);
        itemQuantity.value = '???';
        itemQuantity.color = Color4.Black();
        itemQuantity.fontSize = 16;
        itemQuantity.width = "80px";
        itemQuantity.height = "40px";
        itemQuantity.positionY = "-190px";
        itemQuantity.positionX = "80px";
        itemQuantity.hTextAlign = 'left';
        this.itemQuantity = itemQuantity;

        const commitButton = createUIImage(this.container, img_commit_btn);
        scaleImage(commitButton, 300, 60);
        // commitButton.positionX = "200px";
        commitButton.positionY = "-270px";
        commitButton.isPointerBlocker = true;
        commitButton.onClick = new OnClick((e) => {
            log('click on Commit');
            this.hide();
        })

        const itemForSale = createUIImage(this.container, item_data.image);
        scaleImage(itemForSale, 300, 300);
        // itemForSale.positionX = "200px";
        itemForSale.positionY = "50px";

        this.itemId = item_data.id;

    }

    public async show() {
        const voucherKernel = new VoucherKernelContract();
        await voucherKernel.connect();
        const quantity = await voucherKernel.getItemQuantity(this.itemId);
        const price = await voucherKernel.getItemPrice(this.itemId);
        const priceETH = EthConnect.fromWei(price.toString(), 'ether');
        this.itemPrice.value = priceETH + ' ETH';
        this.itemQuantity.value = quantity;
        this.container.visible = true;
    }
    public hide() {
        this.container.visible = false;
    }
}