import React from 'react';
import { bool, string, func, arrayOf, shape, node } from 'prop-types';
import styled from 'styled-components';
import { SONIC_SILVER, GAINSBORO, SUNSET_ORANGE } from '@vincent_za/styles';
import { PROP_ASYNC_STATUS, SHAPE_ASYNC_STATUS_INITIAL, determineAsyncStatus } from '@vincent_za/utils';
import Svg from '../../Svg/component';
import { SpinnerLoader } from '../../Loader';
import TooltipWrap from '../../TooltipWrap/container';

import { CLASSNAME_TRIGGER_TEMPLATE_ICON, CLASSNAME_TRIGGER_TEMPLATE_SPINNER } from '../constants';

const TooltipWrapStyled = styled(TooltipWrap)`
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  justify-content: center;
  ${props => props.isInErrorGroup && 'margin: 0 !important'};
`;

const Label = styled.div`
  color: ${props => props.isActive ? GAINSBORO : 'inherit'};
  cursor: pointer;
`;

const TriggerTemplateIcon = styled(Svg)`
  display: ${props => props.isHidden ? 'none' : 'flex'};
  width: 1.4rem;
  height: 1.4rem;
  fill: ${props => props.isActive ? GAINSBORO : SONIC_SILVER};
  ${props => props.isError && `
    fill: ${props.isInverseErrorGroup ? ' #fff' : SUNSET_ORANGE} !important;
  `};
  cursor: pointer;

  &:hover {
    ${props => !props.isError && `fill: ${GAINSBORO}`};
  };
`;

const TriggerTemplateSpinner = styled(SpinnerLoader)`
  width: 1.6rem;
  height: 1.6rem;
`;

class TriggerTemplate extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.isActive !== this.props.isActive) return true;
    if (nextProps.asyncStatus !== this.props.asyncStatus) return true;
    if (nextProps.asyncStatusList !== this.props.asyncStatusList) return true;
    if (nextProps.children !== this.props.children) return true;
    return false;
  }

  onClickHandler = (event) => {
    this.props.onClick(event);
    this.props.onClickCb();
  }

  render() {
    const {
      isActive,
      isInErrorGroup,
      isInverseErrorGroup,
      tooltip,
      label,
      svg,
      tooltipPosition,
      asyncStatus,
      asyncStatusList,
      children,
      className,
    } = this.props;
    const { isBusy, isError, errorMessage } = (determineAsyncStatus({ asyncStatus, asyncStatusList }) || {});

    return (
      <TooltipWrapStyled
        isErrorVariant={isError}
        isInErrorGroup={isInErrorGroup}
        position={tooltipPosition}
        tooltip={isInErrorGroup ? undefined : isError && tooltip ? `${tooltip} - ${errorMessage}` : tooltip}
        className={className}
        onClick={this.onClickHandler}
      >
        {label && <Label isActive={isActive}>{label}</Label>}
        {
          svg &&
          <TriggerTemplateIcon
            isActive={isActive}
            isInverseErrorGroup={isInverseErrorGroup}
            svg={svg}
            isHidden={isBusy}
            isError={isError}
            className={CLASSNAME_TRIGGER_TEMPLATE_ICON}
          />
        }
        <TriggerTemplateSpinner
          isAlwaysVisible
          isStatic
          size={1.6}
          asyncStatus={asyncStatus}
          asyncStatusList={asyncStatusList}
          className={CLASSNAME_TRIGGER_TEMPLATE_SPINNER}
        />
        {children}
      </TooltipWrapStyled>
    );
  }
}

TriggerTemplate.propTypes = {
  isActive: bool,
  isInErrorGroup: bool,
  isInverseErrorGroup: bool,
  tooltip: string,
  label: string,
  svg: string,
  tooltipPosition: string,
  onClick: func,
  onClickCb: func,
  asyncStatus: shape(PROP_ASYNC_STATUS),
  asyncStatusList: arrayOf(shape(PROP_ASYNC_STATUS)),
  children: node,
  className: string,
};

TriggerTemplate.defaultProps = {
  isActive: false,
  isInErrorGroup: false,
  isInverseErrorGroup: false,
  tooltip: undefined,
  label: undefined,
  tooltipPosition: 'right',
  svg: undefined,
  onClick() {},
  onClickCb() {},
  asyncStatus: SHAPE_ASYNC_STATUS_INITIAL,
  asyncStatusList: [],
  children: undefined,
  className: undefined,
};

export default TriggerTemplate;
