import React, { Component } from 'react';
import { Field } from 'redux-form';
import styled from 'styled-components';
import SimpleTable from 'react-simple-table';
import { Row, Col } from 'react-styled-flexboxgrid';
import { Dots2 } from 'styled-text-spinners';
import Bundle from 'react-bundle';
import remcalc from 'remcalc';
import forceArray from 'force-array';
import {
FormGroup,
FormMeta,
Input,
Button,
Card,
Progressbar,
ProgressbarItem,
ProgressbarButton,
H3,
typography
} from 'joyent-ui-toolkit';
const Dl = styled.dl`
margin: ${remcalc(13)} ${remcalc(19)};
`;
const ServiceName = H3.extend`
margin-top: 0;
margin-bottom: 0;
line-height: 1.6;
font-weight: 600;
`;
const ServiceCard = Card.extend`
min-height: ${remcalc(72)};
`;
const ImageTitle = ServiceName.extend`
display: inline-block;
`;
const Image = styled.span`
${typography.fontFamily};
`;
const ButtonsRow = Row.extend`
margin-top: ${remcalc(29)};
margin-bottom: ${remcalc(60)};
`;
const FilenameContainer = styled.span`
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: stretch;
`;
const FilenameInput = styled(Input)`
order: 0;
flex: 1 1 auto;
align-self: stretch;
`;
const FilenameRemove = Button.extend`
order: 0;
flex: 0 1 auto;
align-self: auto;
margin: ${remcalc(8)};
margin-right: 0;
height: ${remcalc(48)};
`;
class ManifestEditorBundle extends Component {
constructor() {
super();
this.state = {};
this.handleRender = this.handleRender.bind(this);
}
handleRender(ManifestEditor) {
if (ManifestEditor) {
setTimeout(() => {
this.setState({ ManifestEditor });
}, 80);
}
return