import React from 'react';
import withWidth from '@material-ui/core/withWidth';
import {withStyles} from '@material-ui/core/styles';
import { Component } from 'react';
import PropTypes from 'prop-types';
import LinearProgress from '@material-ui/core/LinearProgress';

import Utils from '../Utils';

const styles = theme => ({
    root: {
        //border:     '0 solid #FFF',
        display:    'block',
        left:       0,
        top:        0,
        width:      '100%',
        height:     '100%',
        background: 'white',
        color:      'black',
        borderRadius: 4,
        boxShadow: '0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%)',
    },
});

class CustomTab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            href: '',
        };

        this.refIframe = React.createRef();
        this.registered = false;

        CustomTab.getHref(this.props.instancesWorker, this.props.tab, this.props.hostname, this.props.protocol, this.props.port, this.props.hosts,  this.props.adminInstance)
            .then(href =>
                this.setState({href}));
    }

    static getHref(instancesWorker, tab, hostname, protocol, port, hosts, adminInstance) {
        return instancesWorker.getInstances()
            .then(instances => {
                let adapter = tab.replace(/^tab-/, '');
                let instNum;
                const m = adapter.match(/-(\d+)$/);
                instNum = m ? parseInt(m[1], 10) : null;

                let instance;
                if (instNum !== null) {
                    adapter = adapter.replace(/-(\d+)$/, '');
                    const name = `system.adapter.${adapter}.${instNum}`;
                    instance = Object.keys(instances).find(id => id === name);
                } else {
                    const name = `system.adapter.${adapter}.`;

                    instance = Object.keys(instances).find(id => id.startsWith(name));
                }
                instance = instances[instance];

                if (!instance || !instance.common || !instance.common.adminTab) {
                    console.error(`Cannot find instance ${tab}`);

                    return '';
                }

                // calculate href
                let href = instance.common.adminTab.link;

                if (!href) {
                    if (instance.common.materializeTab) {
                        href = `adapter/${adapter}/tab_m.html${instNum !== null && instNum !== undefined ? '?' + instNum : ''}`;
                    } else {
                        href = `adapter/${adapter}/tab.html${instNum !== null && instNum !== undefined ? '?' + instNum : ''}`;
                    }
                }

                if (!instance.common.adminTab.singleton && instNum !== null && instNum !== undefined) {
                    href += `${href.includes('?') ? '&' : '?'}instance=${instNum}`;
                }

                if (href.includes('%')) {
                    // fix for singletons
                    if (instNum === null || instNum === undefined) {
                        instNum = instance._id.split('.').pop();
                    }

                    // replace
                    const hrefs = Utils.replaceLink(href, adapter, instNum, {
                        hostname,
                        protocol,
                        objects: instances,
                        hosts,
                        adminInstance,
                        port,
                    });

                    href = hrefs ? hrefs[0]?.url : '';
                }

                // add at the end the instance, as some adapters make bullshit like: window.location.search.slice(-1) || 0;
                href += `${href.includes('?') ? '&' : '?'}newReact=true${instNum !== null && instNum !== undefined ? '&' + instNum : ''}`;

                return href;
            });
    }

    componentWillUnmount() {
        this.registered && this.props.onUnregisterIframeRef(this.refIframe);
    }

    componentDidMount() {
        if (!this.registered && this.refIframe.contentWindow) {
            this.registered = true;
            this.props.onRegisterIframeRef(this.refIframe);
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (!this.registered && this.refIframe.contentWindow) {
            this.registered = true;
            this.props.onRegisterIframeRef(this.refIframe);
        }
    }

    render() {
        if (!this.state.href) {
            return <LinearProgress />;
        }

        if (window.location.port === '3000') {
            return 'Test it in not development mode!';
        } else {
            return <iframe
                ref={el => this.refIframe = el}
                title={ this.props.tab }
                className={ this.props.classes.root }
                src={ this.state.href }
                onError={ e => {
                    e.target.onerror = null;
                    this.setState({href: this.state.href.replace('tab_m.html', 'tab.html') });
                }}
            />;
        }
    }
}

CustomTab.propTypes = {
    t: PropTypes.func,
    lang: PropTypes.string,
    themeName: PropTypes.string,
    tab: PropTypes.string.isRequired,
    instancesWorker: PropTypes.object.isRequired,

    hostname: PropTypes.string,
    protocol: PropTypes.string,
    port: PropTypes.number,
    adminInstance: PropTypes.string,
    hosts: PropTypes.array,

    expertMode: PropTypes.bool,
    onRegisterIframeRef: PropTypes.func,
    onUnregisterIframeRef: PropTypes.func,
};

export default withWidth()(withStyles(styles)(CustomTab));

@@ -572,17 +572,18 @@
   border
-R
+-r
 adius: 4
@@ -595,17 +595,18 @@
      box
-S
+-s
 hadow: '
@@ -610,18 +610,23 @@
 : '0
+px
  2px 
-2px 0
+1px -1px
  rgb
@@ -638,26 +638,27 @@
 0 / 
-14
+20
 %25), 0
- 3
+px 1
 px 1px 
--2
+0
 px r
@@ -673,24 +673,28 @@
  / 1
-2
+4
 %25), 0
+px
  1px 
-5
+3
 px 0
+px
  rgb
@@ -706,15 +706,48 @@
 0 / 
+1
 2
-0
 %25)',%0A
+        border: '0px solid #888'%0A
     

edit Border and Border-Shadow to admin5 default