import React from 'react';
import { EuiText, EuiResizableContainer } from '../../../../src/components';
import { fake } from 'faker';

const text = (
  <>
    <p>{fake('{{lorem.paragraphs}}')}</p>
    <p>{fake('{{lorem.paragraphs}}')}</p>
    <p>{fake('{{lorem.paragraphs}}')}</p>
  </>
);

export default () => (
  <div>
    <EuiResizableContainer style={{ height: '600px' }}>
      {(EuiResizablePanel, EuiResizableButton) => (
        <>
          <EuiResizablePanel initialSize={60} minSize="20%">

            <EuiResizableContainer direction="vertical" style={{ height: '600px' }}>
              {(EuiResizablePanel, EuiResizableButton) => (
                <>
                  <EuiResizablePanel initialSize={50} minSize="20%">
                    <EuiText>
                      <p>Top Panel</p>
                    </EuiText>
                  </EuiResizablePanel>

                  <EuiResizableButton />

                  <EuiResizablePanel initialSize={50} minSize="10%">
                    <EuiText>
                      <p>Bottom Panel</p>
                    </EuiText>
                  </EuiResizablePanel>
                </>
              )}
            </EuiResizableContainer>

          </EuiResizablePanel>

          <EuiResizableButton />

          <EuiResizablePanel initialSize={40} minSize="10%">
            <EuiText>
              <p>{text}</p>
            </EuiText>
          </EuiResizablePanel>
        </>
      )}
    </EuiResizableContainer>
  </div>
);