import React from 'react';
import { Button, Icon, Tabs, Modal } from 'antd';
import { WeaTools, WeaLocaleProvider, WeaDialog, WeaNewScroll } from 'ecCom';

const TabPane = Tabs.TabPane;
const getLabel = WeaLocaleProvider.getLabel;
const E8_SYS_COLORS = ['#0070c1', '#cc3432', '#5c64c2', '#50833b', '#874d19', '#f46f43', '#22c9b2', '#b24079', '#83686c', '#666f81', '#627f7e'];

import './style/';

class WeaThemeCenter extends React.Component {
    state = { visible: false, loading: false, tabKey: '', tabKey2: '', themes: [], curTheme: {}, hasRight: false };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onSetting = this.onSetting.bind(this);
        this.onThemeChange = this.onThemeChange.bind(this);
        this.onColorChange = this.onColorChange.bind(this);
    }

    render() {
        const { visible, loading, tabKey, tabKey2, themes = [], curTheme = {}, hasRight } = this.state;
        const { type: type_cur, templateid: templateid_cur, templatetype: templatetype_cur, skin: skin_cur, color: color_cur, layout: layout_cur } = curTheme;

        const themeTabPaneComp = (
            <TabPane tab={getLabel(0, '主题')} key="1">
                <Tabs type="card" activeKey={tabKey2} onChange={key => this.setState({ tabKey2: key })}>
                    {
                        themes.map((themeType) => {
                            const { key, name, data = [] } = themeType;

                            return (
                                <TabPane tab={name} key={key}>
                                    <WeaNewScroll height={327}>
                                        <div className="wea-theme-center-items">
                                            {
                                                data.map((theme, index) => {
                                                    const { type, templateid, templatetype, skin, layout } = theme;

                                                    let previewComp = '';
                                                    if (key == 'ecology8') {
                                                        previewComp = <div className="wea-theme-center-preview" dangerouslySetInnerHTML={{ __html: theme.preview }} />;
                                                    } else {
                                                        previewComp = <div className="wea-theme-center-preview"><img src={theme.preview} alt={theme.name} /></div>;
                                                    }

                                                    let selectedComp = '';
                                                    if (type == type_cur && ((templateid == templateid_cur && templatetype == templatetype_cur && skin == skin_cur) || (layout == '5' && layout == layout_cur))) {
                                                        selectedComp = <img src="/wui/theme/ecology9/image/colors/selected.png" alt="" className="wea-theme-center-selected" />;
                                                    }

                                                    return (
                                                        <div key={index} className="wea-theme-center-item" onClick={() => this.onThemeChange(theme)}>
                                                            {previewComp}
                                                            <div className="wea-theme-center-title" title={theme.name}>{theme.name}</div>
                                                            {selectedComp}
                                                        </div>
                                                    );
                                                })
                                            }
                                        </div>
                                    </WeaNewScroll>
                                </TabPane>
                            );
                        })
                    }
                </Tabs>
            </TabPane>
        );

        let tabComp = <div />;
        const operationComp = hasRight ? <Button type="primary" size="small" style={{ margin: '0 18px 5px', borderRadius: '2px' }} onClick={this.onSetting}>{getLabel(0, '管理')}</Button> : '';
        if (templatetype_cur == 'ecology8') {
            let colorImg = '';
            let colorSelectedStyle = {};
            if (color_cur) {
                const _color = color_cur.replace(/[^0-9]/ig, '');
                const _index = _color == '' ? 0 : parseInt(_color);
                colorImg = `/wui/theme/ecology8/page/images/skin/color${_color}_wev8.png`;
                colorSelectedStyle = { display: 'block', left: 50 * _index + 41, backgroundColor: E8_SYS_COLORS[_index] };
            }

            const colorTabPaneComp = (
                <TabPane tab={getLabel(0, '颜色')} key="2">
                    <div className="wea-theme-center-color-preview">
                        <div className="wea-theme-center-color-img" style={{ background: `url(${colorImg})` }} />
                    </div>
                    <div className="wea-theme-center-colors">
                        <div className="wea-theme-center-color-selected" style={colorSelectedStyle} />
                        {
                            E8_SYS_COLORS.map((item, index) => (
                                    <div key={index}
                                      className="wea-theme-center-color"
                                      style={{ backgroundColor: item }}
                                      data-index={index == 0 ? '' : index}
                                      onClick={this.onColorChange}
                                    />
                                ))
                        }
                    </div>
                </TabPane>
            );

            tabComp = (
                <Tabs activeKey={tabKey} onChange={key => this.setState({ tabKey: key })} tabBarExtraContent={operationComp}>
                    {themeTabPaneComp}
                    {colorTabPaneComp}
                </Tabs>
            );
        } else {
            tabComp = (
                <Tabs activeKey={tabKey} onChange={key => this.setState({ tabKey: key })} tabBarExtraContent={operationComp}>
                    {themeTabPaneComp}
                </Tabs>
            );
        }

        return (
            <WeaDialog
              visible={visible}
              loading={loading}
              title={getLabel(0, '主题中心')}
              icon="wevicon-theme-center"
              iconBgcolor="#a7adb5"
              style={{ width: 644, height: 435 }}
              parentClassName="wea-theme-center"
              mask={false}
              zIndex={100}
              hasScroll={true}
              buttons={this.getButtons()}
              onCancel={this.onCancel}
            >
                <div className="wea-theme-center-body">{tabComp}</div>
            </WeaDialog>
        );
    }

    onShow() {
        this.setState({ visible: true, loading: true });
        WeaTools.callApi('/api/portal/themeCenter/getAllThemes', 'GET', {}).then((result) => {
            const { data = {} } = result;
            const { curTheme = {} } = data;
            const { templatetype, color, layout } = curTheme;
            this.setState({ loading: false, tabKey: templatetype == 'ecology8' && color ? '2' : '1', tabKey2: layout == '5' ? 'ts' : templatetype, ...data });
        });
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button type="primary" onClick={this.onCancel}>{getLabel(0, '关闭')}</Button>);
        return buttons;
    }

    onOk() {
        this.setState({ visible: false });
    }

    onCancel() {
        this.setState({ visible: false });
    }

    onSetting() {
        window.open('/spa/portal/engine.html#/portalengine/portalmaintenance/mainportal', '_blank');
    }

    onThemeChange(theme) {
        const { type, templatetype } = theme;

        if (type == 'preview') {
            let redirectUrl = theme.url;
            let width = screen.availWidth - 10;
            let height = screen.availHeight - 60;
            let szFeatures = 'top=0,';
            szFeatures += 'left=0,';
            szFeatures += `width=${width},`;
            szFeatures += `height=${height},`;
            szFeatures += 'directories=no,';
            szFeatures += 'status=yes,';
            szFeatures += 'menubar=no,';
            szFeatures += 'scrollbars=yes,';
            szFeatures += 'resizable=yes';
            window.open(redirectUrl, '', szFeatures);
        } else if (type == 'layout') {
            this.setState({ loading: true });
            doThemeAction('onLayoutChange', { type: theme.layout }, () => this.setState({ loading: false }));
        } else if (templatetype == 'ecology8' || templatetype == 'ecology9') {
                this.setState({ loading: true });
                doThemeAction('onThemeChange', theme, () => this.setState({ loading: false, curTheme: theme }));
            }
    }

    onColorChange(e) {
        const $obj = jQuery(e.target);
        const index = $obj.attr('data-index');
        jQuery('.wea-theme-center-color-img').css('background', `url(/wui/theme/ecology8/page/images/skin/color${index}_wev8.png)`);
        jQuery('.wea-theme-center-color-selected').css({ display: 'block', 'background-color': $obj.css('background-color') }).animate({ left: $obj.position().left - 5 });

        this.setState({ loading: true });
        doThemeAction('onColorChange', { color: `left${index}` }, () => this.setState({ loading: false }));
    }
}

export default WeaThemeCenter;