/* global window */

import Plotly from 'plotly.js/lib/index-basic';
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { icon_base } from '@descarteslabs/pizzazz/styles/mixins';
import LoadingSpinner from '@descarteslabs/pizzazz/styles/icons/loading-blue.svg';

const StyledLoadingIcon = styled.div`
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2rem;
    margin-left: -2rem;
    z-index: 1;
`;
const iconWidth = '4rem';
const LoadingIcon = styled(LoadingSpinner)`
    ${icon_base({ size: '1.25rem', width: iconWidth })}
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    animation: spin 1s linear infinite;
`;

class Chart extends React.Component {
    componentDidMount() {
        this.drawChart();
    }

    componentDidUpdate() {
        this.drawChart();
    }

    drawChart() {
        Plotly.newPlot('chart', this.props.data, this.props.layout, { displayModeBar: false });
        window.onresize = _ => {
            Plotly.newPlot('chart', this.props.data, this.props.layout, { displayModeBar: false });
        };
    }

    render() { // eslint-disable-line class-methods-use-this
        return (
            <div id="chart" />
        );
    }
}

Chart.propTypes = {
    data: PropTypes.array.isRequired,
    layout: PropTypes.object.isRequired,
};
Chart.defaultProps = {
    data: {},
    layout: {},
};

const ChartContainer = styled.div`
    display: ${({ showModal }) => (showModal ? 'block' : 'none')};
    position: relative;
    height: 325px;
`;
const ChartWrapper = styled.div`
    display: ${({ isLoading }) => (isLoading ? 'none' : 'block')};
`;
const ChartView = ({ showModal, plotData: { data, layout, summaryLoading } }) => (
    <ChartContainer
        showModal={showModal}
    >
        <ChartWrapper
            isLoading={summaryLoading}
        >
            <Chart
                data={data}
                layout={layout}
            />
        </ChartWrapper>
        <StyledLoadingIcon>
            {summaryLoading ? <LoadingIcon /> : null}
        </StyledLoadingIcon>
    </ChartContainer>
);

ChartView.propTypes = {
    plotData: PropTypes.object.isRequired,
    showModal: PropTypes.bool.isRequired,
};

export default ChartView;