import React, {ReactNode, useState} from 'react';
import {FunctionComponent} from "react";
import SyntaxHighlighter from 'react-syntax-highlighter';
import './CodesWrapper.scss';

interface IProps {
  codes: string,
  component: ReactNode,
  codeHeight?: Number
}

const CodesWrapper: FunctionComponent<IProps> = (props) => {
  const customStyle = {
    fontSize: '16px',
    fontWeight: 500,
    padding: 0,
    background: 'white',
    lineHeight: '1.5em',
  };

  const [isCodeVisible, setCodeVisible] = useState(false);
  const codesClassName = !isCodeVisible ? 'w-code-codes' : 'w-code-codes active';

  const codesStyle = !isCodeVisible ? {height: 0} : { height: `${props.codeHeight}px` };
  return (
    <div className="w-code">
      <div className="w-code-title">
        <p>Example</p>
        <p className="w-code-show" onClick={() => setCodeVisible(!isCodeVisible)}>
          {isCodeVisible ? 'Hide code' : 'Show code'}
        </p>
      </div>
      <div className="w-code-main">
        {props.component}
      </div>
      <div className={codesClassName} style={codesStyle}>
        {
          <SyntaxHighlighter
            language='xml'
            customStyle={customStyle}
          >
            {props.codes}
          </SyntaxHighlighter>
        }
      </div>
    </div>
  );
};

CodesWrapper.defaultProps = {
  codeHeight: 260
};

export default CodesWrapper;