import zim from "https://zimjs.org/cdn/015/zim";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1000, 1000, interstellar, interstellar.darken(.2), ready, "https://fonts.googleapis.com/css?family=Rubik+Doodle+Shadow");
function ready() {
    
    // given F (Frame), S (Stage), W (width), H (height)
    // put code here
   
    // CREATE SNOWFLAKE
    
    STYLE = {color:white};
    const color = interstellar.darken(.5);
    const puzzle = new Container(W,H);
    new Rectangle(W,H,color).center(puzzle);
    const flake = new Container(W,H).centerReg(puzzle);    
    const base = new Container(500,500).reg(CENTER,BOTTOM);
    new Rectangle(10,300).pos(0,0,CENTER,BOTTOM,base);
    const c = new Circle(38).pos(0,280,CENTER,BOTTOM,base);   
    new Circle(60, clear, white, 10).center(c).addTo(base);
    loop(6, i=>{
        let t = new Triangle(30,120,120).reg(CENTER,BOTTOM).loc(c,null,base).rot(60*i)
        let d = new Circle(20).pos(0,-10,CENTER,TOP,t).addTo(base)
        new Circle(10,color).center(d).addTo(base);
    })
    loop(6, i=>{
        base.clone().rot(i*60).loc(flake.width/2, flake.height/2, flake)
    })
    new Circle(40,color,white,10).center(flake);
    new Poly(150,6,.3,clear,white,10).center(flake);
    new Poly(320,6,.5,clear,white,10).center(flake);

    // NORMALLY, we could chop(puzzle,3,9) and pass that in the the Scrambler() 
    // but that would be static pieces
    // we want to animate the pieces so we will do so and take cached portions 
    // then updateCache, tile these pieces and put into the Scrambler

    const cols = 3;
    const rows = 9;
    const w = W/cols;
    const h = H/rows;

    const parts = []; // prepare the array of parts for the Tile for the Scrambler
    loop(rows, i=>{
        loop(cols, j=>{
            const part = puzzle.clone().cache(w*j, h*i, w, h, null, {adjustBounds:true});
            part.getChildAt(1).animate({ // this is the snowflake inside above the backing
                props:{rotation:360},
                ease:"linear",
                time:50,
                loop:true,
                animateCall:()=>{part.updateCache();}
            });
            parts.push(part);
        });
    });

    const tile = new Tile(parts, cols, rows, 0,0, true);
    const scrambler = new Scrambler(tile,null,null,true,2,null,4).center();

    const made = F.madeWith({box:faint, color:light}).sca(1.5);
    STYLE = {font:"Rubik Doodle Shadow", size:50, color:white};
    const title1 = new Label("H A P P Y");
    const title2 = new Label("HOLIDAYS!");
    STYLE = {};    
    const button = new Button(null,null,"AGAIN").tap(()=>{
        loop(parts, part=>{part.getChildAt(1).rot(0)});
        scrambler.addTo().scramble(2,0,4);
        puzzle.removeFrom();
        button.removeFrom();
        made.removeFrom();
        title1.removeFrom();
        title2.removeFrom();
    });

    flake.effect(new GlowEffect(blue, 1, 40, 40, 1, 2));
    scrambler.on("complete", ()=>{
        scrambler.removeFrom();
        puzzle.addTo();        
        flake.rot(parts[0].getChildAt(1).rotation).animate({rotation:360}, 3, "backInOut", ()=>{            
            title1.pos(90,70,LEFT,TOP).alp(0).animate({wait:1, props:{alpha:1}});
            title2.pos(70,70,RIGHT,TOP).alp(0).animate({wait:1.5, props:{alpha:1}});
            button.pos(90,70,LEFT,BOTTOM).alp(0).animate({wait:2, props:{alpha:.8}});
            made.pos(80,50,RIGHT,BOTTOM).alp(0).animate({wait:2.5, props:{alpha:1}});                      
        });
    });    
        
}

// Docs for items used
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Container
// https://zimjs.com/docs.html?item=Circle
// https://zimjs.com/docs.html?item=Rectangle
// https://zimjs.com/docs.html?item=Triangle
// https://zimjs.com/docs.html?item=Poly
// https://zimjs.com/docs.html?item=Label
// https://zimjs.com/docs.html?item=Button
// https://zimjs.com/docs.html?item=Scrambler
// https://zimjs.com/docs.html?item=tap
// https://zimjs.com/docs.html?item=effect
// https://zimjs.com/docs.html?item=animate
// https://zimjs.com/docs.html?item=loop
// https://zimjs.com/docs.html?item=pos
// https://zimjs.com/docs.html?item=loc
// https://zimjs.com/docs.html?item=alp
// https://zimjs.com/docs.html?item=rot
// https://zimjs.com/docs.html?item=reg
// https://zimjs.com/docs.html?item=sca
// https://zimjs.com/docs.html?item=addTo
// https://zimjs.com/docs.html?item=removeFrom
// https://zimjs.com/docs.html?item=centerReg
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=Tile
// https://zimjs.com/docs.html?item=GlowEffect
// https://zimjs.com/docs.html?item=chop
// https://zimjs.com/docs.html?item=darken
// https://zimjs.com/docs.html?item=STYLE