import React, { Fragment } from 'react';
import { Margin, Padding } from 'styled-components-spacing';
import PropTypes from 'prop-types';
import styled, { withTheme } from 'styled-components';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Field } from 'redux-form';
import remcalc from 'remcalc';
import titleCase from 'title-case';
import Flex, { FlexItem } from 'styled-flex-component';
import is from 'styled-is';
import Message, {
Title as MessageTitle,
Description as MessageDescription
} from '../message';
import {
default as BaseCard,
Outlet as CardOutlet,
Header as CardHeader,
HeaderMeta as CardHeaderMeta
} from '../card';
import { FormGroup, Input, Textarea, FormLabel, FormMeta } from '../form';
import { Delete as DeleteIcon, Arrow as ArrowIcon } from '../icons';
import { H4 } from '../text/headings';
import Button from '../button';
import Divider from '../divider';
const CollapsedKeyValue = styled.div`
word-break: break-all;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
`;
const Card = styled(BaseCard)`
${is('borderless')`
border: none;
box-shadow: none;
`};
`;
const Header = styled(CardHeader)`
border-top: 0;
border-left: 0;
border-right: 0;
`;
const MarginalButton = styled(Button)`
margin-right: ${remcalc(6)};
`;
const PaddingMaxWidth = styled(Padding)`
word-wrap: break-word;
overflow-wrap: break-word;
width: 100%;
box-sizing: border-box;
`;
const Meta = styled(CardHeaderMeta)`
height: ${remcalc(47)};
max-width: 98%;
`;
const Bold = styled.span`
font-weight: ${props => props.theme.font.weight.semibold};
`;
const TextareaKeyValue = ({
type,
submitting,
onlyName,
onlyValue,
editor
}) => (
{`${titleCase(method)} ${type}`}
) : (