/* global VERSION */

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { transparentize } from 'polished';

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 CloseIcon from '@descarteslabs/pizzazz/styles/icons/close_small.svg';
import ModifyIcon from '@descarteslabs/pizzazz/styles/icons/edit.svg';
import TranslateIcon from '@descarteslabs/pizzazz/styles/icons/move.svg';
import SelectAllIcon from '@descarteslabs/pizzazz/styles/icons/select-all.svg';
import MetadataIcon from '@descarteslabs/pizzazz/styles/icons/metadata-add-a01.svg';
import DownloadIcon from '@descarteslabs/pizzazz/styles/icons/download-s.svg';
import UploadIcon from '@descarteslabs/pizzazz/styles/icons/upload-s.svg';
import DeleteIcon from '@descarteslabs/pizzazz/styles/icons/delete.svg';
import {
    flex_row, flex, icon_base,
} from '@descarteslabs/pizzazz/styles/mixins';

import { accessClass } from '@descarteslabs/cycle-widgets/es2015/utils/access';

/* Styled components */

// Main container.
const HelpPanelContainer = styled.div``;

/* Header */

const HelpHeaderContainer = styled.div`
    ${flex({ direction: 'row-reverse', justify: 'space-between', align: 'center' })}
`;
const HelpLabelContainer = styled.div`
    font-size: ${fonts.sizes.x_large};
    text-align: center;
    padding: ${dimensions.base_small};
    margin-left: calc(50% - 68px);
    margin-right: auto;
`;
const EmailContainer = styled.div`
    ${flex_row({ align: 'center', justify: 'space-around' })}
    margin-top: 0.25rem;
    margin-right: 0.25rem;
`;
const Button = styled.button`
    padding: ${dimensions.base_small} ${dimensions.base};
    color: ${colors.fill[0]};
    font-family: Source Sans Pro;
    font-size: ${fonts.sizes.medium};
    font-weight: ${fonts.weights.light};
    text-decoration: none;
    text-align: center;
    background: ${colors.primary.blue};
    border: none;
    border-radius: 2px;
    outline: none;

    &:hover {
        background: ${transparentize(0.2, colors.primary.blue)};
        cursor: pointer;
    }
`;
const FeedbackContainer = styled.div`
    margin: 0.25rem;
`;
const FeedbackButton = Button.extend``;
const BugReportContainer = styled.div`
    margin: 0.25rem;
`;
const BugReportButton = Button.extend``;
const closeIconWidth = '1.75rem';
const CloseContainer = styled.div`
    margin: 0.25rem;
    & svg {
        ${icon_base({ size: '1.25rem', width: closeIconWidth })}
        height: initial;
        transform: rotate(0deg);
        transition: all 0.25s ease-in-out;
    }
    &:hover {
        cursor: pointer;
    }
`;

/* Core content */

const HelpContentContainer = styled.div`
    ${flex_row({ align: 'flex-start', justify: 'space-around' })}
    margin: 0 ${dimensions.base};
`;
const StrongSpan = styled.span`
    font-weight: ${fonts.weights.semibold};
`;
const IconSpan = styled.span`
    & svg {
        ${icon_base({ size: '1rem', width: '1rem' })}
        transform: translate(0, 0.2rem);
    }
`;

/* Keyboard shortcuts section */

const KeyboardShortcutsContainer = styled.div``;
const KSLabelContainer = styled.div`
    text-align: center;
    font-size: ${fonts.sizes.large};
    margin-bottom: ${dimensions.base_small};
`;
const KSContentContainer = styled.div`
    font-size: ${fonts.sizes.small};
`;
const KSItemContainer = styled.div`
    ${flex_row({ justify: 'space-between', align: 'center' })}
`;
const KSItemLabel = styled.div`
    margin-right: ${dimensions.base_small};
`;
const KSItemContent = styled.div`
    margin: calc(${dimensions.base_small}/2);
`;
const KSIconContainer = styled.div`
    display: inline-block;
    border: 1px solid ${colors.stroke[1]};
    border-radius: 4px;
    padding: 0.05rem 0.5rem;
    ${shadows.small}
    margin: 0 0.25rem;
`;

/* Layer config section */

const LayerConfigContainer = styled.div`
    flex: 1 1 33%;
`;
const LCLabelContainer = styled.div`
    text-align: center;
    font-size: ${fonts.sizes.large};
    margin-bottom: ${dimensions.base_small};
`;
const LCContentContainer = styled.div`
    font-size: ${fonts.sizes.small};
    font-weight: ${fonts.weights.light};
`;
const InnerIconContainer = KSIconContainer.extend`
    padding: 0 0.25rem;
    margin: 0 calc(${dimensions.base_small}/2);
`;

/* Map toolbar section */

const MapToolbarContainer = styled.div`
    flex: 1 1 33%;
`;
const MTLabelContainer = styled.div`
    text-align: center;
    font-size: ${fonts.sizes.large};
    margin-bottom: ${dimensions.base_small};
`;
const MTContentContainer = styled.div`
    font-size: ${fonts.sizes.small};
    font-weight: ${fonts.weights.light};
`;

/* View */

const HelpView = ({
    onCloseHelpPanel,
}) => (
    <HelpPanelContainer>
        <HelpHeaderContainer>
            <EmailContainer>
                <BugReportContainer>
                    <a
                        href={`mailto:ui@descarteslabs.com?subject=Bug in Viewer: v${VERSION}`}
                    >
                        <BugReportButton>
                            Bug report
                        </BugReportButton>
                    </a>
                </BugReportContainer>
                <FeedbackContainer>
                    <a
                        href={`mailto:ui@descarteslabs.com?subject=Feedback for Viewer: v${VERSION}`}
                    >
                        <FeedbackButton>
                            Feedback
                        </FeedbackButton>
                    </a>
                </FeedbackContainer>
                <CloseContainer
                    onClick={onCloseHelpPanel}
                >
                    <CloseIcon />
                </CloseContainer>
            </EmailContainer>
            <HelpLabelContainer>
                {`Viewer - v${VERSION}`}
            </HelpLabelContainer>
        </HelpHeaderContainer>
        <HelpContentContainer>
            <KeyboardShortcutsContainer>
                <KSLabelContainer>
                    Keyboard Shortcuts
                </KSLabelContainer>
                <KSContentContainer>
                    <KSItemContainer>
                        <KSItemLabel>
                            Show/hide menu
                        </KSItemLabel>
                        <KSItemContent>
                            <KSIconContainer>
                                ESC
                            </KSIconContainer>
                        </KSItemContent>
                    </KSItemContainer>
                    <KSItemContainer>
                        <KSItemLabel>
                            Cycle layers up/down
                        </KSItemLabel>
                        <KSItemContent>
                            <KSIconContainer>
                                j
                            </KSIconContainer>
                            /
                            <KSIconContainer>
                                k
                            </KSIconContainer>
                        </KSItemContent>
                    </KSItemContainer>
                    <KSItemContainer>
                        <KSItemLabel>
                            Zoom
                        </KSItemLabel>
                        <KSItemContent>
                            <KSIconContainer>
                                +
                            </KSIconContainer>
                            /
                            <KSIconContainer>
                                -
                            </KSIconContainer>
                        </KSItemContent>
                    </KSItemContainer>
                    <KSItemContainer>
                        <KSItemLabel>
                            Panning
                        </KSItemLabel>
                        <KSItemContent>
                            <KSIconContainer>
                                &larr;
                            </KSIconContainer>
                            <KSIconContainer>
                                &darr;
                            </KSIconContainer>
                            <KSIconContainer>
                                &uarr;
                            </KSIconContainer>
                            <KSIconContainer>
                                &rarr;
                            </KSIconContainer>
                        </KSItemContent>
                    </KSItemContainer>
                </KSContentContainer>
            </KeyboardShortcutsContainer>
            <LayerConfigContainer>
                <LCLabelContainer>
                    General Tips
                </LCLabelContainer>
                <LCContentContainer>
                    <ul>
                        <li> <StrongSpan>Add a new layer</StrongSpan> to the map by clicking the "Add Layer" button.</li>
                        <li> <StrongSpan>Edit an existing layer</StrongSpan> by clicking on the layer of interest in the side menu.</li>
                        <li> Upon adding/editing a layer, an edit dialog will pop up showing the configuration of the layer.  Change the layer options to what you want and click the "Go" button (or hit <InnerIconContainer>Enter</InnerIconContainer>) when you're done.</li>
                        <li> Clicking off of the dialog, or clicking the <IconSpan><CloseIcon /></IconSpan> button in the upper-right corner of the dialog, <StrongSpan>will cancel any layer configuration modifications that you made.</StrongSpan></li>
                        <li> <StrongSpan>Select multiple features</StrongSpan> on the map using <InnerIconContainer>Shift</InnerIconContainer> + <InnerIconContainer>Click</InnerIconContainer>.  To deselect a feature, use <InnerIconContainer>Cmd</InnerIconContainer> + <InnerIconContainer>Click</InnerIconContainer> if you're on a Mac, <InnerIconContainer>Ctrl</InnerIconContainer> + <InnerIconContainer>Click</InnerIconContainer> if you're on any other OS.</li>
                        <li> <StrongSpan>Copy the scene id(s) for selected feature(s)</StrongSpan> using <InnerIconContainer>Cmd</InnerIconContainer> + <InnerIconContainer>C</InnerIconContainer> if you're on a Mac, <InnerIconContainer>Ctrl</InnerIconContainer> + <InnerIconContainer>C</InnerIconContainer> if you're on any other OS.</li>
                        <li> <StrongSpan>Select custom features in a drag box</StrongSpan> using <InnerIconContainer>Cmd</InnerIconContainer> + <InnerIconContainer>Click</InnerIconContainer> + <InnerIconContainer>Drag</InnerIconContainer> if you're on a Mac, <InnerIconContainer>Ctrl</InnerIconContainer> + <InnerIconContainer>Click</InnerIconContainer> + <InnerIconContainer>Drag</InnerIconContainer> if you're on any other OS.</li>
                        <li> <StrongSpan>Iterate through custom features</StrongSpan> using <InnerIconContainer>a</InnerIconContainer> / <InnerIconContainer>s</InnerIconContainer>.</li>
                        <li style={{ marginTop: '0.2rem' }} > <StrongSpan>Zoom to drag box</StrongSpan> using <InnerIconContainer>Shift</InnerIconContainer> + <InnerIconContainer>Click</InnerIconContainer> + <InnerIconContainer>Drag</InnerIconContainer>.</li>
                    </ul>
                </LCContentContainer>
            </LayerConfigContainer>
            <MapToolbarContainer
                className={accessClass('toolbar')}
            >
                <MTLabelContainer>
                    Map Toolbar
                </MTLabelContainer>
                <MTContentContainer>
                    <ul>
                        <li> <StrongSpan>Draw</StrongSpan> polygons, points, and boxes on the map using the the corresponding buttons in the toolbar.</li>
                        <li> <StrongSpan>Modify</StrongSpan> shapes that you have drawn (or the native scene outlines) after clicking on the <IconSpan><ModifyIcon /></IconSpan> tool.</li>
                        <li> <StrongSpan>Translate</StrongSpan> shapes that you have drawn after clicking on the <IconSpan><TranslateIcon /></IconSpan> too.</li>
                        <li> <StrongSpan>Select all</StrongSpan> shapes that you have drawn using the <IconSpan><SelectAllIcon /></IconSpan> tool.</li>
                        <li> <StrongSpan>Add to the metadata</StrongSpan> of all selected shapes using the <IconSpan><MetadataIcon /></IconSpan> tool.  This won't delete any native metadata for the GeoJSON features, although <StrongSpan>you can overwrite existing fields.</StrongSpan></li>
                        <li> <StrongSpan>Download</StrongSpan> all selected shapes, and their associated metadata, using the <IconSpan><DownloadIcon /></IconSpan> tool.  This will download the features as a GeoJSON feature collection.</li>
                        <li> <StrongSpan>Upload</StrongSpan> shapes to the map using the <IconSpan><UploadIcon /></IconSpan> tool.  Supported formats are GeoJSON, ndGeoJSON, KML, TopoJSON, IGC, and GPX.</li>
                        <li> <StrongSpan>Delete</StrongSpan> all selected shapes using the <IconSpan><DeleteIcon /></IconSpan> tool.</li>
                        <li> <StrongSpan>Drag-and-drop</StrongSpan> GeoJSON features onto the map.</li>
                    </ul>
                </MTContentContainer>
            </MapToolbarContainer>
        </HelpContentContainer>
    </HelpPanelContainer>
);

HelpView.propTypes = {
    onCloseHelpPanel: PropTypes.func.isRequired,
};

export default HelpView;