import React from 'react';

import Chrome from '../../modules/chrome';
import Colours from '../../modules/colours';
import Unsplash from '../../modules/unsplash';

import Time from './time';
import Hex from './hex';
import Panels from './panels';
import History from './history';


class NewTab extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            settings     : {},
            time         : {},
            colour       : '',

            coloursClass : 'colours colours--hidden',
            bgImage      : null,
            bgOpacity    : 1
        };

        this.fetchSettings = this.fetchSettings.bind(this);
        this.tick = this.tick.bind(this);
        this.tickColour = this.tickColour.bind(this);
        this.loadBgImage = this.loadBgImage.bind(this);
    }

    componentDidMount () {
        this.fetchSettings();

        // Fetch new settings when changed
        chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
            if (request.msg === 'saved') {
                this.fetchSettings();
            }
        });
    }

    componentWillUnmount () {
        clearInterval(this.interval);
        this.interval = null;
    }

    fetchSettings () {
        Chrome.getSettings((settings) => {
            let coloursClass = 'colours';

            // No animations
            if (!settings.animations) {
                coloursClass += ' notransition';
            }

            // Text/colour protection
            if (settings.colour !== 'regular' || settings.bg !== 'none') {
                coloursClass += ' full';
            }

            // Solid colour
            if (settings.colour === 'solid') {
                this.setState({
                    colour : settings.colourSolid
                });
            }

            // No background image (or offline)
            if (settings.bg === 'none' || !navigator.onLine) {
                this.loadBgImage(null);
            }

            // Default font (or offline)
            if (settings.font === 'default' || !navigator.onLine) {
                this.loadFont(null);
            }

            // Online: set background image/web font
            if (navigator.onLine) {
                if (settings.bg === 'unsplash') {
                    Unsplash.getImage(settings.bgUnsplashFreq, this.loadBgImage);
                }

                if (settings.bg === 'custom' && settings.bgCustomUrl !== '') {
                    this.loadBgImage(settings.bgCustomUrl);
                }

                if (settings.font === 'web') {
                    this.loadFont(settings.fontWeb, true);
                }
            }

            // Check if the clock was already started
            if (this.interval) {
                this.setState({
                    coloursClass : coloursClass,
                    settings     : settings
                });
            } else {
                // Start the clock when we hit the next second
                setTimeout(() => {
                    this.tick();
                    this.interval = setInterval(this.tick, 1000);

                    this.setState({
                        coloursClass : coloursClass,
                        settings     : settings
                    });
                }, 1000 - (Date.now() % 1000));
            }
        });
    }

    tick () {
        let now     = new Date(),
            hour    = now.getHours(),
            minute  = now.getMinutes(),
            second  = now.getSeconds();

        let time = {
            pm     : hour >= 12,
            hour   : this.pad(hour),
            minute : this.pad(minute),
            second : this.pad(second)
        };

        this.setState({
            time : time
        });

        if (this.state.settings.colour !== 'solid' && this.state.bgOpacity !== 0) {
            this.tickColour(time);
        }
    }

    tickColour (time) {
        let colour = `#${time.hour}${time.minute}${time.second}`;

        let seconds =
            (parseInt(time.hour, 10) * 60 * 60) +
            (parseInt(time.minute, 10) * 60) +
            (parseInt(time.second, 10));

        switch (this.state.settings.colour) {
            case 'full':
                colour = Colours.secondToHexColour(seconds);
                break;

            case 'hue':
                colour = Colours.secondToHueColour(seconds);
                break;
        }

        this.setState({
            colour : colour
        });
    }

    pad (n) {
        return (n < 10) ? `0${n}` : n.toString();
    }

    loadFont (font, isWeb) {
        if (isWeb) {
            let elLinkFont  = document.createElement('link');
            elLinkFont.type = 'text/css';
            elLinkFont.rel  = 'stylesheet';
            elLinkFont.href = `https://fonts.googleapis.com/css?family=${font}:400,300`;

            document.head.appendChild(elLinkFont);
        }

        if (!this.elStyleFont) {
            this.elStyleFont = document.createElement('style');
            document.head.appendChild(this.elStyleFont);
        }

        this.elStyleFont.textContent = font ? `* { font-family: '${font}' !important; }` : '';
    }

    loadBgImage (imgUrl) {
        this.setState({
            bgImage   : imgUrl,
            bgOpacity : imgUrl ? this.state.settings.bgOpacity / 100 : 1
        });
    }

    render () {
        let settings = this.state.settings;

        if (Object.keys(settings).length === 0) {
            return <div className={this.state.coloursClass} />;
        }

        // Background styles
        let bgColourStyle = {
            backgroundColor : this.state.bgOpacity < 1 ?
                Colours.rgba(this.state.colour, this.state.bgOpacity) :
                this.state.colour
        };

        return (
            <div className={this.state.coloursClass}>
                { this.state.bgImage &&
                    <div className='colours__bg_img'
                        style={{ backgroundImage: `url(${this.state.bgImage})`}} />
                }

                { this.state.bgOpacity !== 0 &&
                    <div className='colours__bg' style={bgColourStyle} />
                }

                { settings.showOpts &&
                    <div className='colours__opts'>
                        <a target='_blank' className='colours__opts__opt colours__opts__opt--options'
                            href='options.html' title='Options' />

                        { this.state.bgImage &&
                            <a target='_blank' className='colours__opts__opt colours__opts__opt--download'
                                href={this.state.bgImage} title='Open image' />
                        }
                    </div>
                }

                <div className='info'>
                    { settings.showTime &&
                        <Time hourFormat24={settings.time24hr} time={this.state.time} />
                    }

                    { settings.showHex && this.state.bgOpacity !== 0 &&
                        <Hex colour={this.state.colour} />
                    }

                    <Panels />
                </div>

                { settings.ticker && settings.colour !== 'solid' &&
                    <History colour={this.state.colour} />
                }
            </div>
        );
    }
}

export default NewTab;

@@ -2361,32 +2361,121 @@
 shFreq, 
-this.loadBgImage
+(imgUrl) =%3E %7B%0A                        this.loadBgImage(imgUrl, settings.bgOpacity);%0A                    %7D
 );%0A     
@@ -2624,16 +2624,36 @@
 ustomUrl
+, settings.bgOpacity
 );%0A     
@@ -5351,16 +5351,25 @@
  (imgUrl
+, opacity
 ) %7B%0A    
@@ -5457,31 +5457,9 @@
 l ? 
-this.state.settings.bgO
+o
 paci

Fix colour div opacity issue