/* global document */

import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';

import * as colors from '@descarteslabs/pizzazz/styles/colors';
import * as shadows from '@descarteslabs/pizzazz/styles/shadows';
import * as dimensions from '@descarteslabs/pizzazz/styles/dimensions';
import * as fonts from '@descarteslabs/pizzazz/styles/fonts';
import { flex_row, flex_col, icon_base } from '@descarteslabs/pizzazz/styles/mixins';
import LoadingSpinner from '@descarteslabs/pizzazz/styles/icons/loading-blue.svg';
import CloseIcon from '@descarteslabs/pizzazz/styles/icons/close-medium-f01.svg';
import CopySharePanelURLIcon from '@descarteslabs/pizzazz/styles/icons/clipboard-add.svg';

/* Styled components */

// Icon styling.
const iconContainerWidth = dimensions.medium;
const iconWidth = dimensions.x_small;

const IconContainer = styled.div`
    position: relative;
    width: ${iconContainerWidth};
    z-index: 1;
    padding: ${dimensions.base_small};
    ${({ disabled }) => (disabled
        ? 'cursor: default;'
        : css`
            &:hover {
                cursor: pointer;
            }
        `
    )}
    & svg {
        ${icon_base({ size: iconWidth, width: iconWidth })};
    }
`;

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

// Main container.
const SharePanelContainer = styled.div`
    position: absolute;
    left: 50%;
    top: 30%;
    width: 700px;
    margin-left: -350px;
    background: ${colors.fill[2]};
    display: ${({ visible }) => (visible ? 'flex' : 'none')};
    overflow: hidden;
    ${shadows.medium}
    border-radius: 2px;
    z-index: 5;
`;
const SharePanelLabelContainer = styled.div`
    ${flex_row({ align: 'center' })}
    padding: ${dimensions.base_small};
    background: ${colors.primary.blue};
    color: ${colors.fill[2]};
`;
const SharePanelLabel = styled.div`
    font-size: ${fonts.sizes.medium};
    width: 100%;
    text-align: center;
`;
const SharePanelPanelContainer = styled.div`
    ${flex_row({ align: 'center', justify: 'space-around' })}
    font-weight: 300;
    padding: ${dimensions.base_small};
    background: ${colors.fill[1]};
    ${({ color }) => (color
        ? `border-left: ${dimensions.base_small} solid ${color};`
        : ''
    )}
`;
const URLContainer = styled.div`
    word-wrap: break-word;
    margin: 0 ${dimensions.base_small};
    max-width: 90%;
`;
const SharePanelURLButtonsContainer = styled.div`
    ${flex_row({ wrap: 'nowrap', justify: 'space-around' })}
    margin-top: ${dimensions.base_small};
    margin-right: 0.1875rem;
`;
const BaseSharePanelContainer = styled.div`
    position: relative;
    padding: 0;
    margin-left: calc(${dimensions.base_small}/2);
    margin-right: calc(${dimensions.base_small}/2);
`;
const CopySharePanelContainer = BaseSharePanelContainer.extend``;
const SharePanelURLContainer = styled.div`
    ${flex_col()}
    padding: ${dimensions.base_small};
    opacity: ${({ loading }) => (loading ? '0.7' : '1')};
`;
const SharePanelUrlLabelContainer = styled.div`
    margin-bottom: ${dimensions.base};
`;

const SharePanelURLWrapper = styled.div`
    position: relative;
    margin: ${dimensions.base};
    overflow: auto;
    min-height: ${({ loading }) => (loading ? `calc(${loadingIconWidth} + ${dimensions.base})` : 'initial')};
`;
const SharePanelClose = styled.div`
    position: absolute;
    top: 0;
    right: 0;

    &:hover {
        cursor: pointer;
    }
`;
const SharePanelWrapper = styled.div`
    position: relative;
    ${flex_col()}
    width: 100%;
`;

/* SharePanel component */

export default class SharePanel extends React.Component { // eslint-disable-line react/no-multi-comp

    static propTypes = {
        loading: PropTypes.bool.isRequired,
        url: PropTypes.string.isRequired,
        visible: PropTypes.bool.isRequired,
        onClosePanel: PropTypes.func.isRequired,
        onCopyUrl: PropTypes.func.isRequired,
    };

    componentDidMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

    setWrapperRef = node => {
        this.wrapperRef = node;
    }

    handleClickOutside = event => {
        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
            this.props.onClosePanel();
        }
    }

    render() {
        const { loading, url, visible, onCopyUrl, onClosePanel } = this.props;
        return (
            <SharePanelContainer
                visible={visible}
                innerRef={this.setWrapperRef}
            >
                <SharePanelWrapper>
                    <SharePanelLabelContainer>
                        <SharePanelLabel>
                            Shareable Viewer URL
                        </SharePanelLabel>
                    </SharePanelLabelContainer>
                    <SharePanelURLWrapper
                        loading={loading}
                    >
                        <SharePanelURLContainer
                            loading={loading}
                        >
                            <SharePanelUrlLabelContainer>
                                Copy this URL and share it with another user to share your current Viewer configuration.
                            </SharePanelUrlLabelContainer>
                            <SharePanelPanelContainer>
                                <URLContainer>
                                    {url}
                                </URLContainer>
                                <SharePanelURLButtonsContainer>
                                    <CopySharePanelContainer
                                        onClick={onCopyUrl}
                                    >
                                        <IconContainer>
                                            <CopySharePanelURLIcon />
                                        </IconContainer>
                                    </CopySharePanelContainer>
                                </SharePanelURLButtonsContainer>
                            </SharePanelPanelContainer>
                        </SharePanelURLContainer>
                        {loading
                            ? <StyledLoadingIcon>
                                <LoadingIcon />
                            </StyledLoadingIcon>
                            : null
                        }
                    </SharePanelURLWrapper>
                    <SharePanelClose
                        onClick={onClosePanel}
                    >
                        <IconContainer>
                            <CloseIcon />
                        </IconContainer>
                    </SharePanelClose>
                </SharePanelWrapper>
            </SharePanelContainer>
        );
    }
}