content: import React from 'react';
  import { compose, graphql } from 'react-apollo';
  import { connect } from 'react-redux';
  import { set } from 'react-redux-values';
  import forceArray from 'force-array';
  import { Margin } from 'styled-components-spacing';
  import find from 'lodash.find';
  import reverse from 'lodash.reverse';
  import sortBy from 'lodash.sortby';
  import get from 'lodash.get';
  
  import {
    ViewContainer,
    StatusLoader,
    Message,
    MessageTitle,
    MessageDescription,
    H3
  } from 'joyent-ui-toolkit';
  
  import { Network, Empty } from 'joyent-ui-resource-widgets';
  import Description from '@components/instances/description';
  import GetNetworks from '@graphql/list-instance-networks.gql';
  
  export const Networks = ({
    networks = [],
    loading = false,
    error = null,
    setMachinesExpanded,
    setInfoExpanded
  }) => (
    <ViewContainer main>
      <Margin bottom="3">
        <Description href="https://docs.joyent.com/public-cloud/network/sdn">
          Use predefined or customized fabric networks which can be public-facing
          or private. All fabrics are isolated from other customers giving you
          complete control over the network environment. Read more on fabrics.
        </Description>
      </Margin>
      <Margin bottom={3}>
        <H3>Networks attached to this instance</H3>
      </Margin>
      {loading ? <StatusLoader /> : null}
      {!loading && error && !networks.length ? (
        <Margin bottom="5">
          <Message error>
            <MessageTitle>Ooops!</MessageTitle>
            <MessageDescription>
              An error occurred while loading your networks
            </MessageDescription>
          </Message>
        </Margin>
      ) : null}
      {!loading &&
        networks.map(({ id, infoExpanded, machinesExpanded, ...network }) => (
          <Network
            {...network}
            key={id}
            id={id}
            infoExpanded={infoExpanded}
            machinesExpanded={machinesExpanded}
            onInfoClick={() => setInfoExpanded(id, !infoExpanded)}
            onMachinesClick={() => setMachinesExpanded(id, !machinesExpanded)}
            selected
            readOnly
          />
        ))}
      {!loading && !error && !networks.length ? (
        <Empty transparent borderTop>
          You have no networks attached to this instance
        </Empty>
      ) : null}
    </ViewContainer>
  );
  
  export default compose(
    graphql(GetNetworks, {
      options: ({ match }) => ({
        variables: {
          id: get(match, 'params.instance')
        }
      }),
      props: ({ data }) => {
        const { loading, error, variables } = data;
        const { id } = variables;
  
        const machines = get(data, 'machine', []);
        const instance = find(forceArray(machines), ['id', id]);
        const values = get(instance, 'networks', []);
        const networks = reverse(sortBy(values, 'public'));
        return {
          networks,
          instance,
          loading,
          error
        };
      }
    }),
    connect(
      ({ values }, { networks }) => ({
        networks: networks.map(({ id, ...network }) => ({
          ...network,
          infoExpanded: get(values, `networks-${id}-info-expanded`, false),
          machinesExpanded: get(
            values,
            `networks-${id}-machines-expanded`,
            false
          ),
          id
        }))
      }),
      dispatch => ({
        setMachinesExpanded: (id, expanded) => {
          return dispatch(
            set({ name: `networks-${id}-machines-expanded`, value: expanded })
          );
        },
        setInfoExpanded: (id, expanded) => {
          return dispatch(
            set({ name: `networks-${id}-info-expanded`, value: expanded })
          );
        }
      })
    )
  )(Networks);
  