import * as React from 'react';
import * as Radium from 'radium';
import { styles } from './SidePanelStyles';
import Drawer from 'material-ui/Drawer';

export interface SidePanelComponentProps {
  visible: boolean;
  children: JSX.Element;
}

const backdrop = {
  height: '82%'
};

const SidePanelComponent: React.SFC<SidePanelComponentProps> = (props: SidePanelComponentProps) => {
  const sidePanelWidth = window.innerWidth <= 600 ? '95%' : '50%';
  return (
    <Drawer open={props.visible} openSecondary={true} containerStyle={styles.drawer} width={sidePanelWidth} docked={false}>
      {props.children}
    </Drawer>
  );
};

export const SidePanelView = Radium(SidePanelComponent);

export const styles: any = {
  drawer: {
    position: 'absolute',
    right: 0,
    top: 0,
    boxShadow: 0,
    borderRight: '2px solid #69CEFA',
    font: ' HelveticaNeue-Medium,  Helvetica, Arial',
    lineHeight: '2rem',
    padding: '0 10px 10px 10px',
  }
};

const styles: any = {
  wrapper: {
    padding: '2rem 2rem 1rem 2rem',
    position: 'relative',
    overflow: 'hidden',
    background: background,
    fontFamily: 'Helvetica Neue',
    //borderTop: '3px solid ' + green100,
    boxShadow: '2px 2px 10px 0px rgba(0,0,0,0.56)',
    borderRadius: 6,
    '@media only screen and (max-width : 600px)': {
      padding: '1rem'
    }
  },
  titleImageWrapper: {
    '@media only screen and (max-width : 600px)': {
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      margin: '0.5rem 0 1rem 0'
    }
  },
  stepWrapper: {
    '@media only screen and (max-width : 600px)': {
      display: 'flex',
      height: '20px',
      alignItems: 'center',
      flexDirection: 'row-reverse',
      justifyContent: 'center',
      width: '100%',
    }
  },
  topWrapper: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    '@media only screen and (max-width : 600px)': {
      flexDirection: 'column-reverse',
    }
  },
  titleWrapper: {
    textAlign: 'left',
    marginRight: '1rem'
  },
  contentWrapper: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  bottomRightContainer: {
    position: 'absolute',
    right: '5px',
    bottom: '5px'
  },
  mlogo: {
    width: '70px',
    '@media only screen and (max-width : 600px)': {
    }
  },
  hidden: {
    display: 'none'
  }
};

return (
        <div style={styles.wrapper}>
          <div style={styles.topWrapper}>
            <div style={styles.titleImageWrapper}>
              {this.getTitle()}
              {(isImageVisible && mobileImage) && <img src={mobileImage} style={styles.mlogo}/>}
            </div>
            {isStepCountVisible(this.props.stage) &&
            <div style={styles.stepWrapper}>
              <StepCount selected={getStepIndex(this.props.stage)} steps={3}/>
            </div>
            }
          </div>
          <div style={styles.contentWrapper}>
            {this.state.windowWidth && this.state.windowWidth > 600 &&
            <CharityCardContainer onToggleSidePanel={this.handleOnToggleSidePanel.bind(this)}/>}
            <MainContentView
              stage={this.props.stage}
              charity={this.props.charity}
              onToggleSidePanel={(sidePanelContent: SidePanelContent) => this.handleOnToggleSidePanel(sidePanelContent)}
              updateStage={this.props.updateStage}
            />
          </div>
          <SidePanelView visible={isSidePanelOpen}>
            {this.getSidePanelContent()}
          </SidePanelView>
        </div>
      );