import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import styled from 'styled-components';
import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc';
import Flex from 'styled-flex-component';
import bytes from 'bytes';
import {
H3,
H4,
FormGroup,
Button,
TableTh,
TableTr,
TableThead,
TableTbody,
Table,
TableTd,
Radio,
Checkbox,
Label,
GeneralIcon,
StorageIcon,
CpuIcon,
MemoryIcon
} from 'joyent-ui-toolkit';
import Empty from './empty';
const GroupIcons = {
MEMORY: ,
STORAGE: ,
GENERAL: ,
COMPUTE:
};
const VerticalDivider = styled.div`
width: ${remcalc(1)};
background: ${props => props.theme.grey};
height: ${remcalc(18)};
display: flex;
align-self: flex-end;
margin: 0 ${remcalc(18)};
box-sizing: border-box;
`;
const SuperScript = styled.div`
background: ${props => props.theme.primary};
border-radius: ${remcalc(3)};
font-weight: 600;
line-height: normal;
font-size: ${remcalc(8)};
color: ${props => props.theme.white};
display: inline-flex;
align-items: center;
justify-content: center;
padding: ${remcalc(3)};
position: absolute;
margin-top: ${remcalc(-8)};
margin-left: ${remcalc(6)};
`;
export const Filters = ({ resetFilters }) => (
Filters
);
export const Package = ({
selected = false,
id,
name,
group,
memory,
price,
vcpus,
disk,
ssd,
hasVms
}) => (
{GroupIcons[group]}
{bytes(memory, { decimalPlaces: 0 })}
{bytes(disk, { decimalPlaces: 0 })}
{ssd && SSD}
{hasVms && (
{vcpus}
)}
{price}
);
export const Packages = ({
handleSubmit,
pristine,
sortBy = 'name',
sortOrder = 'desc',
onSortBy = () => null,
hasVms,
children,
packages
}) => (
);
export const Overview = ({
name,
price,
memory,
vcpus,
hasVms,
ssd,
disk,
onCancel
}) => (
{name}
{price} $
{bytes(memory, { decimalPlaces: 0 })}
{hasVms && (
{vcpus} vCPUS
)}
{bytes(disk, { decimalPlaces: 0 })} disk
{ssd && SSD}
);