import React, { Component } from 'react';
import isEqual from 'lodash.isequal';
import { reduxForm } from 'redux-form';
import { Margin } from 'styled-components-spacing';
import { Col, Row } from 'react-styled-flexboxgrid';
import { reset } from 'redux-form';
import remcalc from 'remcalc';
import styled from 'styled-components';
import { default as defaultState } from '@state/state';

import Inputs from './inputs';
import { returnIcon } from '../icons';

import {
  FormGroup,
  Checkbox,
  Label,
  H6,
  Divider,
  H4,
  P,
  PackageIcon
} from 'joyent-ui-toolkit';

const Flex = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: ${remcalc(8)};

  svg {
    margin-right: ${remcalc(6)};
  }
`;

const FullWidth = styled(Margin)`
  width: 100%;
,`;

const RowMargin = styled(Row)`
  margin-top: ${remcalc(-24)};
`;

class Filters extends Component {
  constructor(props) {
    super(props);
    const { filters: { cpu, cost, ram, disk } } = this.props;

    this.state = {
      ram,
      cpu,
      disk,
      cost,
      reset: 0
    };
  }

  handleResetClick = () => {
    const {
      dispatch,
      filterReset,
      filters: { cpu, cost, ram, disk }
    } = this.props;

    filterReset();
    dispatch(reset('type'));

    this.setState({
      ram,
      cpu,
      disk,
      cost,
      reset: this.state.reset + 1
    });
  };

  render() {
    const {
      filters,
      ramChange,
      cpuChange,
      diskChange,
      costChange
    } = this.props;

    return [
      <Row>
        <Col xs={12}>
          <Margin bottom={6}>
            <Flex>
              <PackageIcon />
              <H6>Package</H6>
            </Flex>
            <Divider height="1px" />
          </Margin>
        </Col>
      </Row>,
      <RowMargin>
        <Col xs={8}>
          <P>
            A package defines the specs of your instance. On Triton, packages
            can only increase in size.{' '}
            <a href="https://docs.joyent.com/public-cloud/instances/packages/sizing">
              Read the docs
            </a>
          </P>
        </Col>
      </RowMargin>,
      <Row>
        <Col>
          <Margin vertical={2}>
            <H4>Filters</H4>
          </Margin>
        </Col>
      </Row>,
      <Row>
        {filters.groups
          .sort((a, b) => (a.name < b.name ? -1 : 1))
          .map((group, i) => (
            <Col>
              <FormGroup
                name={group.name}
                key={group.name}
                type="checkbox"
                reduxForm
              >
                <Checkbox>
                  {returnIcon(group.name)}
                  <Label>{group.name}</Label>
                </Checkbox>
              </FormGroup>
            </Col>
          ))}
      </Row>,
      <FullWidth top={2}>
        <Inputs
          ramChange={value => ramChange(value)}
          cpuChange={value => cpuChange(value)}
          diskChange={value => diskChange(value)}
          costChange={value => costChange(value)}
          filters={filters}
          disabled={isEqual(filters, defaultState.filters)}
          onResetClick={this.handleResetClick}
          reset={this.state.reset}
        />
      </FullWidth>
    ];
  }
}

export default reduxForm({ form: 'type' })(Filters);
