var React = require('react'),
    PlatformButton = require('./platformbutton.jsx')

var SupportedPlatforms = React.createClass({
    getInitialState: function() {
        return {
            moreClicked: false
        };
    },
    onClick: function() {
        this.setState({
            moreClicked: true
        });
    },
    render: function() {
        var keywords = this.props.keywords;
        var sortedMajorPlatforms = [{present:false, text: "Android"}, {present:false, text: "iOS"}, {present:false, text: "Windows"}, {present:false, text: "Blackberry10"}];
        var majorPlatformsSupported = [];
        var otherPlatformsSupported = [];
        // remove windows8 & windows dupe
        if (keywords.indexOf('cordova-windows') > -1 && keywords.indexOf('cordova-windows8') > -1) {
            keywords.splice(keywords.indexOf('cordova-windows8'), 1);
        }
        keywords.forEach(function(keyword) {
            switch (keyword) {
                case 'cordova-firefoxos':
                    otherPlatformsSupported.push(<PlatformButton platform="FirefoxOS" />);
                    break;
                case 'cordova-android':
                    sortedMajorPlatforms[0].present = true;
                    break;
                case 'cordova-amazon-fireos':
                    otherPlatformsSupported.push(<PlatformButton platform="FireOS" />);
                    break;
                case 'cordova-ubuntu':
                    otherPlatformsSupported.push(<PlatformButton platform="Ubuntu" />);
                    break;
                case 'cordova-ios':
                    sortedMajorPlatforms[1].present = true;
                    break;
                case 'cordova-blackberry10':
                    sortedMajorPlatforms[3].present = true;
                    break;
                case 'cordova-wp8':
                    otherPlatformsSupported.push(<PlatformButton platform="Windows Phone 8" />);
                    break;
                case 'cordova-windows8':
                case 'cordova-windows':
                    sortedMajorPlatforms[2].present = true;
                    break;
                case 'cordova-browser':
                    otherPlatformsSupported.push(<PlatformButton platform="Browser" />);
                    break;
            }
        });

        sortedMajorPlatforms.forEach(function(platform) {
            if(platform.present) {
                majorPlatformsSupported.push(<PlatformButton platform={platform.text} />)
            }
        });
        while(majorPlatformsSupported.length < 4 && otherPlatformsSupported.length > 0) {
            majorPlatformsSupported.push(otherPlatformsSupported.shift());
        }

        var moreButton;
        if(otherPlatformsSupported.length > 0 && !this.state.moreClicked) {
            moreButton = <li className="clickable" onClick={this.onClick}>...</li>
        }
        if (!this.state.moreClicked) {
            otherPlatformsSupported = null;
        }
        return (
            <ul className="supportedPlatforms">
                {majorPlatformsSupported}
                {moreButton}
                {otherPlatformsSupported}
            </ul>
        );
    }
});

module.exports = SupportedPlatforms;