import React, { Component } from 'react';
import { Row, Col } from 'react-styled-flexboxgrid';
import styled from 'styled-components';
import remcalc from 'remcalc';
import Package from '@components/package';
import Empty from '@components/empty';
import sortBy from 'lodash.sortby';
import isEqual from 'lodash.isequal';
import is from 'styled-is';
import {
Table,
TableThead,
TableTbody,
TableThFooter,
TableTr,
TableTh,
ArrowIcon
} from 'joyent-ui-toolkit';
const ArrowIconStyled = styled(ArrowIcon)`
margin-left: ${remcalc(6)};
cursor: pointer;
position: relative;
top: ${remcalc(-3)};
transition: transform 200ms ease;
path {
fill: ${props => props.theme.text};
}
${is('selected', 'down')`
transform: rotate(180deg);
`};
`;
const Span = styled.span`
cursor: pointer;
user-select: none;
`;
class Packages extends Component {
constructor(props) {
super(props);
this.state = {
packages: props.packages.sort((a, b) => (a.price > b.price ? 1 : -1)),
selected: null,
price: true,
ordered: 'price'
};
}
handleClick = id => {
this.setState({
selected: id !== this.state.selected ? id : null
});
};
componentWillReceiveProps = nextProps => {
this.setState({
packages: nextProps.packages
});
};
order = column => {
const { packages } = this.state;
const desc = sortBy(packages, [column]).reverse();
const asc = sortBy(packages, [column]);
this.setState({
packages: isEqual(packages, asc) ? desc : asc,
ordered: column,
[column]: !isEqual(packages, asc)
});
};
_cards = () => {
const { selected, packages, ordered } = this.state;
return packages.length > 0 ? (
this.order('name')}>
Name{' '}
{ordered === 'name' && (
this.order('name')}
/>
)}
this.order('memory')}>
RAM{' '}
{ordered === 'memory' && (
this.order('memory')}
/>
)}
this.order('disk')}>
Disk{' '}
{ordered === 'disk' && (
this.order('disk')}
/>
)}
this.order('vcpus')}>
vCPU{' '}
{ordered === 'vcpus' && (
this.order('vcpus')}
/>
)}
this.order('price')}>
$/hour{' '}
{ordered === 'price' && (
this.order('price')}
/>
)}
{packages.map(pack => (
this.handleClick(pack.id)}
selected={selected === pack.id}
key={pack.id}
/>
))}
this.order('name')}>
Name{' '}
{ordered === 'name' && (
this.order('name')}
/>
)}
this.order('memory')}>
RAM{' '}
{ordered === 'memory' && (
this.order('memory')}
/>
)}
this.order('disk')}>
Disk{' '}
{ordered === 'disk' && (
this.order('disk')}
/>
)}
this.order('vcpus')}>
vCPU{' '}
{ordered === 'vcpus' && (
this.order('vcpus')}
/>
)}
this.order('price')}>
$/hour{' '}
{ordered === 'price' && (
this.order('price')}
/>
)}
) : (
);
};
render = () => this._cards();
}
export default Packages;