// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.

import React, { useState } from 'react';
import { RouteComponentProps } from 'react-router';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';

import Icon from './Icon';
import { classes } from './util';

export interface InsetProps extends RouteComponentProps {
  className?: string;
  children?: React.ReactNode;
  isCollapsible?: boolean;
  isError?: boolean;
  isSuccess?: boolean;
  header?: React.ReactNode;
  href?: string | null;
  withTopMargin?: boolean;
  withBottomMargin?: boolean;
}

function Inset ({ children, className, header, history, href, isCollapsible, isError, isSuccess, withBottomMargin, withTopMargin }: InsetProps): React.ReactElement<InsetProps> | null {
  const [isCollapsed, setIsCollapsed] = useState(true);

  if (!children) {
    return null;
  }

  const _onClick = (): void => {
    href && history.push(href);
  };
  const _toggleCollapsed = (): void => setIsCollapsed(!isCollapsed);

  return (
    <div
      className={
        classes(
          'ui--Inset',
          href && 'as-link',
          isCollapsible && 'collapsible',
          (isError && !isSuccess) && 'error',
          (!isError && isSuccess) && 'success',
          withBottomMargin && 'bottom-margin',
          withTopMargin && 'top-margin',
          className
        )
      }
    >
      {isCollapsible && (
        <div
          className='header'
          onClick={_toggleCollapsed}
        >
          <h3>{header}</h3>
          <Icon
            className={classes(isCollapsed && 'collapsed')}
            name='angle up'
          />
        </div>
      )}
      <div
        className={classes('children', (isCollapsible && isCollapsed) && 'collapsed')}
        onClick={_onClick}
      >
        {children}
      </div>
    </div>
  );
}

export default withRouter(
  styled(Inset)`
    & {
      box-shadow: 0 3px 3px rgba(0,0,0,.2);
      position: relative;
      background: #fefefe;
      padding: 1rem;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;

      &.bottom-margin {
        margin-bottom: 2rem;
      }

      &.top-margin {
        margin-top: 2rem;
      }

      &.error {
        background: rgba(255, 0, 0, 0.05);

        &, h1, h2, h3, h4, h5, h6, p {
          color: rgba(156, 0, 0) !important;
        }
      }

      &.success {
        border: 1px solid rgb(168, 255, 136);
        background: rgba(0, 255, 0, 0.05);

        &, h1, h2, h3, h4, h5, h6, p {
          color: rgba(34, 125, 0) !important;
        }
      }

      .header {
        cursor: pointer;
        height: 2rem;
        width: 100%;

        h3 {
          line-height: 2rem;
          margin-bottom: 0;
        }

        .icon {
          height: 4rem;
          width: 4rem;
          font-size: 2rem;
          color: rgba(0,0,0,0.35);
          position: absolute;
          right: 0;
          top: 0;
          line-height: 4rem;
          transition: all 0.2s;
          transform-origin: center center;

          &.collapsed {
            transform: rotate(180deg);
          }
        }
      }

      .children {
        &.collapsed {
          display: none;
        }
      }

      &.as-link {
        cursor: pointer;

        &:hover {
          box-shadow: 0 5px 5px rgba(0,0,0,.2);
          transform: translateY(-2px);
        }
      }
    }
  `
);
