content: import React from 'react';
  import { Row, Col } from 'joyent-react-styled-flexboxgrid';
  import { Margin, Padding } from 'styled-components-spacing';
  import Flex from 'styled-flex-component';
  import styled from 'styled-components';
  import remcalc from 'remcalc';
  
  import {
    Anchor,
    CloseIcon as Close,
    H3,
    Textarea,
    Input,
    P,
    SectionList,
    SectionListAnchor,
    SectionListItem,
    StickyFooter,
    ViewContainer
  } from 'joyent-ui-toolkit';
  
  import { generateTerraform, generateCLI } from './cli-details';
  
  export default class CLIFooter extends React.Component {
    state = {
      active: 'triton'
    };
  
    render() {
      const { active } = this.state;
      const { getData, onCloseCli } = this.props;
  
      return (
        <StickyFooter borderless auto fixed bottom fill="#494949">
          <div>
            <Padding vertical="8">
              <CloseIcon onClick={onCloseCli} />
              <Row>
                <Col xs="12" sm="8">
                  <Margin bottom="2">
                    <Flex>
                      <H3 white>CLI details</H3>
                    </Flex>
                  </Margin>
                  <Margin bottom="5">
                    <P white>
                      Below you can find the command line instructions to deploy
                      this exact instance, or a copy of it, directly from either
                      the Triton CLI or Terraform.
                    </P>
                  </Margin>
                </Col>
              </Row>
              <Row>
                <Col sm="12">
                  <ViewContainer plain>
                    <Margin bottom="3">
                      <SectionList clear>
                        <SectionListItem>
                          <SectionListAnchor
                            white
                            active={active === 'triton'}
                            onClick={() => this.setState({ active: 'triton' })}
                          >
                            Triton CLI
                          </SectionListAnchor>
                        </SectionListItem>
                        <SectionListItem>
                          <SectionListAnchor
                            white
                            active={active === 'terraform'}
                            onClick={() => this.setState({ active: 'terraform' })}
                          >
                            Terraform
                          </SectionListAnchor>
                        </SectionListItem>
                      </SectionList>
                    </Margin>
                  </ViewContainer>
                  <Margin bottom="3">
                    {active === 'triton' ? (
                      <Input
                        readOnly
                        borderless
                        monospace
                        fluid
                        white
                        dark
                        resize
                        rows="15"
                        value={generateCLI(getData())}
                      />
                    ) : (
                      <Textarea
                        readOnly
                        borderless
                        monospace
                        fluid
                        white
                        dark
                        resize
                        value={generateTerraform(getData())}
                      />
                    )}
                  </Margin>
                  <Margin>
                    <Anchor white>{`Learn how to configure ${
                      active === 'triton' ? 'Triton CLI' : 'Terraform'
                    }`}</Anchor>
                  </Margin>
                </Col>
              </Row>
            </Padding>
          </div>
        </StickyFooter>
      );
    }
  }
  
  const Frame = styled.div`
    border-radius: 50%;
    border: ${remcalc(1)} solid ${props => props.theme.white};
    height: ${remcalc(30)};
    width: ${remcalc(30)};
    background: none;
    cursor: pointer;
    z-index: 1;
  
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  `;
  
  const CloseIcon = props => (
    <Frame {...props}>
      <Margin all="1">
        <Close fill="white" />
      </Margin>
    </Frame>
  );
  