import {Injectable,} from '@angular/core';

import kebabCase from 'lodash/kebabCase';

import {CookieService, SettingsService} from '../../web';

//import {OverlayContainer} from '@angular/material';

export type ThemeType = "dark" | "light";

import debounce from 'lodash/debounce'

@Injectable()
export class ThemeService {

    private firstThemeImport = true

    public current: string;

    private original: string;

    private all: string[];

    private settings: any;

    public type: ThemeType;

    public usingCookie = false;

    constructor(
        private cookies: CookieService,
        private settingsAll: SettingsService,
        //        private overlayContainer: OverlayContainer
    ) {
        this.firstThemeImport = true
        this.windowResize = debounce(this.windowResizeRaw.bind(this), 250)
    }

    boot() {
        this.settings = this.settingsAll.data.material;

        this.original = this.settings.themes.material[6]
        this.current = this.original;

        this.all = this.settings.themes.material.map((element: string) => {
            return kebabCase(element)
        })

        const fromCookie = this.cookies.get(this.settings.cookie.theme);
        try {
            if (fromCookie !== undefined) {
                this.usingCookie = true;
                this.setTheme(fromCookie);
            } else {
                this.setTheme(this.original);
            }
        } catch (e) {
            this.setTheme(this.original);
        }

    }

    setTheme(newTheme: string) {
        newTheme = kebabCase(newTheme);

        if (newTheme === this.current && this.firstThemeImport === false) {
            return
        }

        if (this.all.indexOf(newTheme) > -1) {

            if (this.firstThemeImport) {
                document.body.style.visibility = 'hidden'
            }

            import(
                /* webpackPrefetch: true */
                `../scss/material/theme/_${newTheme}.scss`
                ).then((module) => {

                /*
                 */
                if (this.firstThemeImport) {
                   window.addEventListener('resize', this.windowResize.bind(this))
                }
                document.getElementById("cory-pages-layout-theme-matrix").style.display = 'none'
                //console.warn('current', this.current, 'newTheme', newTheme)
                if (newTheme === 'cory-mat-theme-dark-matrix' && (this.current !== 'cory-mat-theme-dark-matrix' || this.firstThemeImport)) {
                    //console.warn('run matrix effect')
                    this.runMatrixEffect()
                }

                const body = document.body;

                let style = document.getElementById('cory-web-app-pages-theme-style')
                if (style) {
                    style.remove()
                }
                style = document.createElement('style');
                style.id = 'cory-web-app-pages-theme-style'
                style.innerText = module.default
                document.head.appendChild(style)

                body.classList.remove(this.current);
//            this.overlayContainer.getContainerElement().classList.remove(this.current);

                this.current = newTheme;
                body.classList.add(this.current);
//            this.overlayContainer.getContainerElement().classList.add(this.current);

                //this.overlayContainer.themeClass = newTheme;
                this.cookies.set(this.settings.cookie.theme, this.current);

                if (this.current.startsWith('cory-mat-theme-dark')) {
                    this.type = "dark";
                    body.classList.add('cory-mat-theme-dark');
                    body.classList.remove('cory-mat-theme-light');
                } else {
                    this.type = "light";
                    body.classList.add('cory-mat-theme-light')
                    body.classList.remove('cory-mat-theme-dark');
                }

                if (this.firstThemeImport) {
                    this.firstThemeImport = false
                    document.body.style.visibility = 'visible'
                }

            })

        } else {
            throw new Error(`undefined ${newTheme}`);
        }
    }

    matrixEffectData: any

    clearMatrixEffect() {
        // geting canvas by Boujjou Achraf
        const c: any = document.getElementById("cory-pages-layout-theme-matrix");
        c.style.display = 'block'
        const ctx = c.getContext("2d");

        //making the canvas full screen
        //c.height = window.innerHeight - 124;
        c.height = window.innerHeight
        c.width = window.innerWidth;

        let matrix: any = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";

        //chinese characters - taken from the unicode charset
        // https://www.chinese-tools.com/learn/characters/list.html
        //let matrix: any = "安吧八爸百北不大岛的弟地东都对多儿二方港哥个关贵国过海好很会家见叫姐京九可老李零六吗妈么没美妹们名明哪那南你您朋七起千去人认日三上谁什生师十识是四他她台天湾万王我五西息系先香想小谢姓休学也一亿英友月再张这中字"
        //let matrix: any = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}安吧八爸百北不大岛的弟地东都对多儿二方港哥个关贵国过海好很会家见叫姐京九可老李零六吗妈么没美妹们名明哪那南你您朋七起千去人认日三上谁什生师十识是四他她台天湾万王我五西息系先香想小谢姓休学也一亿英友月再张这中字"
        //converting the string into an array of single characters
        matrix = matrix.split("");

        const font_size = 10;
        ctx.font = font_size + "px Roboto Mono";

        const columns = c.width / font_size; //number of columns for the rain
        //an array of drops - one per column
        const drops = [];
        //x below is the x coordinate
        //1 = y co-ordinate of the drop(same for every drop initially)
        for (let x = 0; x < columns; x++)
            drops[x] = 1;

        //drawing the characters
        return {
            c,
            ctx,
            font_size,
            drops,
            matrix,
            start: true,
        }
    }

    runMatrixEffectTimeout: any;
    runMatrixEffect() {

        const fps = 18;

        this.matrixEffectData = this.clearMatrixEffect()

        const colors = ['#27c027', '#00ff00', '#20b920', '#000000']

        //const fps = 1000 / 6

        const draw = () => {

            if (this.current === 'cory-mat-theme-dark-matrix') {
                // console.info('request draw')
                //window.requestAnimationFrame(draw);

                /*
                const deltaTime = Date.now() - delta;
                if (deltaTime >= fps) {
                    requestAnimationFrame(draw);
                }
                else {
                    setTimeout(function () { requestAnimationFrame(draw); }, fps - deltaTime);
                }
                 */
                setTimeout(() => {
                    requestAnimationFrame(draw);
                }, 1000 / fps);

                //setTimeout(draw, fps)
            }

            const { c, ctx, font_size, drops, matrix } = this.matrixEffectData
            ///console.info('draw', self.current)

            const inlineDraw = () => {
                //Black BG for the canvas
                //translucent BG to show trail
                ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
                ctx.fillRect(0, 0, c.width, c.height);

                //looping over drops
                for (let i = 0; i < drops.length; i++) {
                    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]
                    //a random chinese character to print
                    //x = i*font_size, y = value of drops[i]*font_size
                    ctx.fillText(matrix[Math.floor(Math.random() * matrix.length)], i * font_size, drops[i] * font_size);

                    //sending the drop back to the top randomly after it has crossed the screen
                    //adding a randomness to the reset to make the drops scattered on the Y axis
                    if (drops[i] * font_size > c.height && Math.random() > 0.975)
                        drops[i] = 0;

                    //incrementing Y coordinate
                    drops[i]++;
                }
            }

            //const delta = Date.now();

            if (this.matrixEffectData.start === false) {
                inlineDraw()
            } else {
                for (let i = 0; i < 200; i++) {
                    inlineDraw()
                }
                this.matrixEffectData.start = false
            }
        }
        setTimeout(() => requestAnimationFrame(draw))
        //setTimeout(draw, fps)
        //draw()
    }

    windowResize: any

    windowResizeRaw() {
        if (this.current === 'cory-mat-theme-dark-matrix') {
            this.matrixEffectData = this.clearMatrixEffect()
        }
    }
    /*
     */
}