import * as React from 'react';
import { translate } from 'react-i18next';

import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles';
import { ExternalLink } from 'ui/common/Links';

const styles = (theme) => ({
  /*tslint:disable*/
  root: {
    height: 'calc(100% - 51px)',
  },
  wrapper: {
    backgroundColor: 'white',
    padding: '33px 40px 49px 40px',
    height: '100%',
    boxSizing: 'border-box' as 'border-box',
  },
  text: {
    fontFamily: 'Roboto-Light',
    fontSize: '18px',
    '& p': {
      color: '#4d4c46',
      lineHeight: '1.5em',
      margin: '0 0 1.5em 0',
    },
    '& > p:first-child': {
      fontSize: '22px',
    },
    '& h3': {
      fontSize: '24px',
      marginTop: '28px',
      paddingBottom: '6px',
    },
    '& ul': {
      marginTop: '30px',
      padding: 0,
      'html[dir="ltr"] &' : {
        paddingLeft: '11px',
      },
      'html[dir="rtl"] &' : {
        paddingRight: '11px',
      },
    },
    '& ul > li': {
      lineHeight: '30px',
    },
  },
  social: {
    borderTop: '1px solid #d5d4d3',
    borderBottom: '1px solid #d5d4d3',
    marginTop: '57px',
    paddingTop: '20px',
    paddingBottom: '19px',
    fontSize: '1.3rem',
  },
  socialLink: {
    backgroundColor: 'white', //
    display: 'inline-block',
    paddingLeft: '18px',
    [theme.breakpoints.down('xs')]: {
      paddingLeft: '0',
      width: '50%',
      textAlign: 'center' as 'center',
    },
    'html[dir="rtl"] &' : {
      paddingLeft: '0',
      paddingRight: '18px',
    },
    '&:hover > a > *': {
      filter: 'brightness(0.5)',
      transition: 'all, 0.1s',
    }
  },
  socialText: {
    [theme.breakpoints.down('sm')]: {
      display: 'none',
    },
  },

  share: {
    fontSize: '1.3rem',
    display: 'inline-block',
    color: '#4d4c46',
    [theme.breakpoints.down('xs')]: {
      width: '100%',
      textAlign: 'center' as 'center',
      marginBottom: '20px',
    },
  },
  twitter: {
    color: '#1da1f2',
    verticalAlign: 'middle',
  },
  linkedin: {
    color: '#0077b5',
    verticalAlign: 'middle',
  },
  icon: {
    fontSize: '3.6rem',
    marginRight: '10px',
    [theme.breakpoints.down('xs')]: {
      marginRight: '0',
      marginLeft: '0',
    },
    'html[dir="rtl"] &' : {
      marginLeft: '10px',
      marginRight: '0',
    },
  },
  /*tslint:enable*/
});

interface IArticleSectionProps extends React.ClassAttributes<any> {
  classes: any;
  className?: string;
  title?: string;
  t: any;
  body: string;
}

class ArticleSection extends React.Component<IArticleSectionProps> {

  public render() {
    const {classes, className, title, t, body} = this.props;
    return(
      <Grid item xs={ 9 } className={ `${className} ${classes.root}` }>
        <div className={ classes.wrapper }>
          <div className={ classes.text } dangerouslySetInnerHTML={ {__html: body} }/>
          { title && (
            <div className={ classes.social }>
              <div className={ classes.share }>
                { t('cms.public.c.activityPostSection.shareArticle') }
              </div>
              <div className={ classes.socialLink }>
                <ExternalLink link={ `https://twitter.com/intent/tweet?url=${window.location}&GenesysPGR` }>
                  <i className={ `fa fa-twitter-square ${classes.twitter} ${classes.icon}` }/>
                  <span className={ `${classes.twitter} ${classes.socialText}` }>
                { t('cms.public.c.activityPostSection.tweet') }
              </span>
                </ExternalLink>
              </div>
              <div className={ classes.socialLink }>
                <ExternalLink link={ `https://www.linkedin.com/shareArticle?mini=true&url=${window.location}&title=${title}&summary=${body}&source=GenesysPGR` }>
                  <i className={ `fa fa-linkedin-square ${classes.linkedin} ${classes.icon}` }/>
                  <span className={ `${classes.linkedin} ${classes.socialText}` }>
                { t('cms.public.c.activityPostSection.shareLinkedin') }
              </span>
                </ExternalLink>
              </div>
            </div>
          ) }
        </div>
      </Grid>
    );
  }

}

export default translate()(withStyles(styles)(ArticleSection));