text: import {connect} from "react-redux";
  import {Dispatch} from "react";
  import * as React from 'react';
  import {Box, createStyles, IconButton, Typography} from "@material-ui/core";
  import {IState} from "@emeraldwallet/store";
  import {makeStyles} from "@material-ui/core/styles";
  import {HDPath} from "@emeraldwallet/core";
  import RemoveIcon from '@material-ui/icons/Remove';
  import AddIcon from '@material-ui/icons/Add';
  
  const useStyles = makeStyles(
    createStyles({
      root: {
        fontSize: "1.2em",
        paddingLeft: "16px"
      },
      currentPath: {
        marginRight: "10px"
      },
      account: {
        paddingLeft: "8px",
        paddingRight: "8px",
        cursor: "grab"
      },
      accountCurrent: {
        fontWeight: "bold",
        fontSize: "1.2em"
      },
      accountDisabled: {
        color: "#f6eff0",
        cursor: "not-allowed"
      }
    })
  );
  
  const MAX = Math.pow(2, 31) - 1;
  
  /**
   *
   */
  const Component = (({start, hdpath, max, disabled, onChange}: Props & Actions & OwnProps) => {
    const styles = useStyles();
    const [account, setAccount] = React.useState(start)
    let from = account - 3;
    let to = account + 3;
    if (from < 0) {
      to += from * -1;
      from = 0;
    }
    if (to > max) {
      from -= (to - max);
      to = max;
    }
  
    function isDisabled(account: number) {
      return disabled.indexOf(account) >= 0;
    }
  
    const accounts = [];
    for (let i = from; i < to; i++) {
      accounts.push({
        account: i,
        disabled: isDisabled(i),
        current: i == account
      });
    }
  
    function update(account: number) {
      setAccount(account);
      onChange(hdpath.forAccount(account));
    }
  
    function dec() {
      if (account <= 0) {
        return;
      }
      let x = account - 1;
      while (x >= 0 && isDisabled(x)) {
        x--;
      }
      if (x >= 0) {
        update(x)
      }
    }
  
    function inc() {
      if (account >= MAX) {
        return;
      }
      let x = account + 1;
      while (x < MAX && isDisabled(x)) {
        x++;
      }
      if (x <= MAX) {
        update(x)
      }
    }
  
  
    return <Box className={styles.root}>
      <Box component={"span"} className={styles.currentPath}>
        <Typography variant={"caption"}>{hdpath.forAccount(account).toString()}</Typography>
      </Box>
      <Box component={'span'}>
        <IconButton aria-label="dec" onClick={dec} disabled={account == 0}>
          <RemoveIcon/>
        </IconButton>
        {accounts.map((acc) => (
          <Typography variant={"caption"}
                      key={acc.account}
                      onClick={() => {
                        if (!acc.disabled) {
                          update(acc.account)
                        }
                      }}
                      title={acc.disabled ? "Used by another wallet" : ""}
                      className={
                        styles.account +
                        " " + (acc.current ? styles.accountCurrent : "") +
                        " " + (acc.disabled ? styles.accountDisabled : "")
                      }>
            {acc.account}
          </Typography>
        ))}
        <IconButton aria-label="inc" onClick={inc} disabled={account == MAX}>
          <AddIcon/>
        </IconButton>
      </Box>
    </Box>
  })
  
  // State Properties
  type Props = {
    start: number,
    max: number,
    disabled: number[],
    hdpath: HDPath
  }
  // Actions
  type Actions = {}
  
  // Component properties
  type OwnProps = {
    base: string,
    start?: number,
    max?: number,
    disabled?: number[],
    onChange: (value: HDPath) => void;
  }
  
  export default connect(
    (state: IState, ownProps: OwnProps): Props => {
      return {
        start: ownProps.start || 0,
        max: ownProps.max || MAX,
        disabled: ownProps.disabled || [],
        hdpath: HDPath.parse(ownProps.base)
      }
    },
    (dispatch: Dispatch<any>, ownProps: OwnProps): Actions => {
      return {}
    }
  )((Component));