import * as React from 'react';
import {translate} from 'react-i18next';
import withStyles from '@material-ui/core/styles/withStyles';

import ADoc from 'model/cms/ADoc';

import Grid from '@material-ui/core/Grid';
import GridContainer from 'ui/layout/GridContainer';

const styles = (theme) => ({
  /*tslint:disable*/
  root: {
    width: '100%',
    minHeight: 'calc(100vh - 365px)',
    margin: 0,
    direction: 'ltr' as 'ltr',
  },
  text: {
    fontFamily: 'Roboto-Light',
    fontSize: '18px',
    '& p': {
      color: '#4d4c46',
      lineHeight: '1.5em',
      margin: '0 0 1.5em 0',
    },
    '& > p:first-child': {
      fontSize: '22px',
    },
    '& h2, h3, h4': {
      fontSize: '24px',
      marginTop: '-78px',
      paddingTop: '100px',
    },
    '& > ul': {
      marginTop: '30px',
      padding: 0,
      // 'html[dir="ltr"] &': {
        paddingLeft: '11px',
      // },
      // 'html[dir="rtl"] &': {
      //   paddingRight: '11px',
      // },
    },
    '& > ul > li': {
      fontSize: '18px',
      lineHeight: '30px',
    },
    '& > div': {
      width: '100%',
    },
    '& table': {
      wordWrap: 'break-word' as 'break-word',
      tableLayout: 'fixed' as 'fixed',
      '& th': {
        textAlign: 'left' as 'left',
        // 'html[dir="rtl"] &': {
        //   textAlign: 'right' as 'right',
        // },
      },
      '& code': {
        [theme.breakpoints.down('sm')]: {
          // overflowWrap: 'break-word' as 'break-word',
          wordBreak: 'break-all' as 'break-all',
          hyphens: 'auto' as 'auto',
          // wordWrap: 'anywhere' as 'anywhere,'
        },
      },
      '& td': {
        '& > p': {
          [theme.breakpoints.down('xs')]: {
            wordBreak: 'break-word' as 'break-word',
            wordWrap: 'break-word' as 'break-word',
            hyphens: 'auto' as 'auto',
          },
        },
      }
    }
    ,
    '& caption': {
      paddingTop: '8px',
      paddingBottom: '8px',
      color: '#777777',
      textAlign: 'left' as 'left',
      // 'html[dir="rtl"] &': {
      //   textAlign: 'right' as 'right',
      // },
    },
    '& code': {
      padding: '2px 4px',
      fontSize: '90%',
      color: '#c7254e',
      backgroundColor: '#f9f2f4',
      borderRadius: '4px',
      fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
      [theme.breakpoints.down('xs')]: {
        wordBreak: 'break-all' as 'break-all',
      },
    },
    '& pre': {
      display: 'block' as 'block',
      padding: '10.5px',
      margin: '0 0 11px',
      fontSize: '15px',
      lineHeight: '1.428571429',
      wordBreak: 'break-all' as 'break-all',
      wordWrap: 'break-word' as 'break-word',
      color: '#333333',
      backgroundColor: '#f5f5f5',
      border: 'none',
      overflow: 'auto' as 'auto',
      fontFamily: ' Menlo, Monaco, Consolas, "Courier New", monospace',
      '& > code': {
        padding: 0,
        color: 'inherit' as 'inherit',
        whiteSpace: 'pre-wrap' as 'pre-wrap',
        backgroundColor: 'transparent' as 'transparent',
      },
      '& .key': {
        color: '#808 !important',
        '& .delimeter': {
          color: '#606 !important',
        },
      },
      '& .string': {
        color: '#d20 !important',
        '& .delimeter': {
          color: '#d1 !important',
        },
      },
      '& .value': {
        color: '#088 !important',
      },
      '& .integer, & .float': {
        color: '#099 !important',
      },
    },
  },
  white: {
    backgroundColor: 'white',
    padding: '33px 40px 49px 40px',
    // height: '100%',
    boxSizing: 'border-box' as 'border-box',
    [theme.breakpoints.down('xs')]: {
      padding: '33px 15px 49px 15px',
    },
  },
  header: {
    fontSize: '75%',
    marginBottom: '4em',
  },
  tocContainer: {
    padding: '0 .5rem',
  },
  tocHeader: {
    overflow: 'hidden' as 'hidden',
    marginTop: 0,
    marginBottom: '.8rem',
    fontSize: '1.6em',
  },
  tocWrapper: {
    padding: '1.25em 1em',
  },
  toc: {
    '& ul': {
      fontSize: '16px',
      lineHeight: '1.4em',
      marginLeft: 0,
      // 'html[dir="rtl"] &': {
      //   marginRight: 0,
      // },
      listStyleType: 'none' as 'none',
      '& ul': {
        // 'html[dir="ltr"] &': {
          paddingLeft: '0.8em',
        // },
        // 'html[dir="rtl"] &': {
        //   paddingRight: '0.8em',
        // },
      },
    },
    '& > ul': {
      fontSize: '16px',
      lineHeight: '1.4em',
      // 'html[dir="ltr"] &': {
        marginLeft: '.125em',
      // },
      // 'html[dir="rtl"] &': {
      //   marginRight: '.125em',
      // },
      padding: 0,
    },
    '& a': {
      textDecoration: 'none' as 'none',
      fontFamily: 'Roboto-Regular',
      color: '#006db4',
    },
  },
  /*tslint:enable*/
});

interface IDocumentationSectionProps extends React.ClassAttributes<any> {
  documentation: ADoc;
  classes: any;
  t: any;
}

class DocumentationSection extends React.Component<IDocumentationSectionProps> {

  public state = {
    basePath: '',
  };

  private replaceImgSrc = (content) => {
    return content.split('<img src="images').join('<img src="/proxy/api/v1/cms/d/images');
  }

  public componentWillReceiveProps(nextProps) {
    if (typeof document !== 'undefined') {
      this.setState({basePath: document.location.pathname});
    }
  }

  public componentWillUpdate(nextProps, nextState) {
    if (typeof document !== 'undefined' && nextState.basePath !== this.state.basePath) {
      this.setState({basePath: document.location.pathname});
    }
  }

  public componentDidMount() {
    if (typeof document !== 'undefined') {
      this.setState({basePath: document.location.pathname});
    }
  }

  public render() {
    const {documentation, classes, t} = this.props;
    return(
      <GridContainer className={ `${classes.root} container-spacing-vertical` }>
        <Grid item xs={ 12 } md={ 9 } className={ classes.white } >
          <div className={ classes.header } dangerouslySetInnerHTML={ {__html: documentation.header} }/>
          <div className={ classes.text } dangerouslySetInnerHTML={ {__html: this.replaceImgSrc(documentation.content)} }/>
        </Grid>
        <Grid item xs={ 12 } md={ 3 }>
          <div className={ classes.tocWrapper }>
            <div className={ classes.tocHeader }>{ t('cms.public.c.documentationSection.toc') }</div>
            <div className={ classes.toc } dangerouslySetInnerHTML={ {__html: documentation.toc.split('href="#').join(`href="${this.state.basePath}#`)} }/>
          </div>
        </Grid>
      </GridContainer>
    );
  }

}

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