import React from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled, { withTheme } from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import remcalc from 'remcalc';
import titleCase from 'title-case';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import {
Card,
CardOutlet,
Divider,
ResetIcon,
Button,
H2,
Label,
QueryBreakpoints,
DotIcon,
DeleteIcon,
StartIcon,
StopIcon,
CopiableField
} from 'joyent-ui-toolkit';
const { SmallOnly, Medium } = QueryBreakpoints;
const stateColor = {
PROVISIONING: 'primary',
RUNNING: 'green',
STOPPING: 'grey',
STOPPED: 'grey',
DELETED: 'secondaryActive',
FAILED: 'red'
};
const GreyLabel = styled(Label)`
opacity: 0.5;
padding-right: ${remcalc(3)};
`;
const Flex = styled.div`
align-items: center;
display: flex;
justify-content: flex-start;
@media (max-width: ${remcalc(767)}) {
display: block;
}
`;
const VerticalDivider = styled.div`
width: ${remcalc(1)};
background: ${props => props.theme.grey};
height: ${remcalc(24)};
display: flex;
align-self: flex-end;
margin: 0 ${remcalc(18)};
@media (max-width: ${remcalc(767)}) {
display: none;
}
`;
export const Meta = ({
created,
updated,
state,
brand,
image,
...instance
}) => [
{(instance.package || {}).name}
,
{titleCase(state)}
Created:
Updated:
];
export default withTheme(
({
instance = {},
starting = false,
stopping = false,
rebooting = false,
removing = false,
onAction,
theme = {}
}) => (
{instance.image &&
instance.image.id && (
)}
{(instance.ips || []).map((ip, i) => (
))}
)
);