import { useEffect , useRef , useState } from 'react' ; import styled from 'styled-components' ; import { Checkbox , Icon , Identicon } from '@components' ; import { getLabelByAccount , useContacts } from '@services/Store' ; import { COLORS } from '@theme' ; import { translateRaw } from '@translations' ; import { ExtendedContact , IAccount , TUuid } from '@types' ; import { trimEllipsis , truncate , useOnClickOutside } from '@utils' ; const { BLUE_LIGHT , GREY_LIGHTEST } = COLORS ; interface AccountDropdownProps { className ? : string ; accounts : IAccount [ ] ; selected : TUuid [ ] ; onSubmit ( selected ) : void ; } interface SDropdownProps { isOpen : boolean ; ref : SCref ; } const Divider = styled ( 'div' ) `
  border-bottom: ${ ( props ) => `1px solid ${ props . theme . colors . GREY_ATHENS }` };
  margin: 0px 20px 15px;
` ; const SDropdown = styled ( 'div' ) < SDropdownProps > `
  display: flex;
  align-items: center;
  position: relative;
  height: 48px;
  padding: 9px 15px;
  border: ${ ( props ) => `1px solid ${ props . theme . colors . GREY_ATHENS }` };
  border-radius: 2px;
  background-color: #ffffff;
  cursor: pointer;

  ${ ( props ) => props . isOpen && `
    box-shadow: 0 7px 10px 5px rgba(50, 50, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 2px solid ${ BLUE_LIGHT };
    padding: 8px 14px;
  ` }

  & > div {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    left: -2px; /* border-box isn't satisfying so we increase width and */
    width: calc(100% + 4px); /* move to left to align the trigger and the dropdown. */
    position: absolute;
    top: 100%;
    z-index: 5;
    background: #ffffff;
    border: 2px solid ${ BLUE_LIGHT };
    border-top: none;
    box-shadow: 0 7px 10px 5px rgba(50, 50, 93, 0.1);
  }

  &:hover {
    border: 2px solid ${ BLUE_LIGHT };
    padding: 8px 14px;
  }
` ; const LabelRow = styled . span `
  width: 100%;
  display: flex;
  justify-content: space-between;
  min-width: 20px;
` ; const SCheckbox = styled ( Checkbox ) `
  padding: 5px 20px 5px 20px;
  height: 50px;
  margin-bottom: 0px;

  &:hover {
    background-color: ${ GREY_LIGHTEST };
  }

  > label {
    min-width: 20px;
  }

  img {
    min-width: 30px;
  }
` ; const ItemContainer = styled . div `
  overflow-y: scroll;
  max-height: 450px;
` ; const renderAccounts = ( accounts , selected , contacts , handleChange ) => accounts . map ( ( account ) => { const addressCard = getLabelByAccount ( account , contacts ) ; const addressLabel = addressCard ? addressCard . label : translateRaw ( 'NO_LABEL' ) ; return ( < SCheckbox key = { account . uuid } name = { `account-${ account . uuid }` } checked = { selected . includes ( account . uuid ) } onChange = { ( ) => handleChange ( account . uuid ) } label = { `${ truncate ( account . address ) } - ${ trimEllipsis ( addressLabel , 65 ) }` } icon = { ( ) => ( < Identicon className = "AccountDropdown-menu-identicon" address = { account . address } / > ) } />); } ) ; const AccountDropdown = ( { accounts = [ ] , selected = [ ] , onSubmit , ... props } ) => { const { contacts } = useContacts ( ) ; const ref = useRef < HTMLElement > ( null ) ; const [ isOpen , setIsOpen ] = useState ( false ) ; const [ draftSelected , setDraftSelected ] = useState < TUuid [ ] > ( [ ] ) ; useOnClickOutside ( ref , ( ) => setIsOpen ( false ) ) ; useEffect ( ( ) => setDraftSelected ( selected ) , [ selected , accounts ] ) ; const allVisible = accounts . length !== 0 && accounts . length === draftSelected . length ; const label = allVisible ? translateRaw ( 'ACCOUNTS_DROPDOWN_ALL_ACCOUNTS' ) : translateRaw ( 'ACCOUNTS_DROPDOWN_SOME_WALLETS' , { $current : `${ draftSelected . length }` , $total : `${ accounts . length }` } ) ; const toggleOpen = ( ) => { setIsOpen ( ! isOpen ) ; } ; const toggleAllAccounts = ( ) => { const changed = draftSelected . length < accounts . length ? accounts . map ( ( a ) => a . uuid ) : [ ] ; setDraftSelected ( changed ) ; onSubmit ( changed ) ; } ; const toggleSingleAccount = ( uuid ) => { const changed = draftSelected . includes ( uuid ) ? draftSelected . filter ( ( entry ) => entry !== uuid ) : draftSelected . concat ( [ uuid ] ) ; setDraftSelected ( changed ) ; onSubmit ( changed ) ; } ; return ( < SDropdown ref = { ref as SCref } role = "button" onClick = { toggleOpen } isOpen = { isOpen } { ... props } > < LabelRow > < span > { label } < /span> < Icon type = "down-caret" width = "10px" / > < /LabelRow> { isOpen && ( < ItemContainer onClick = { ( e ) => e . stopPropagation ( ) } > < SCheckbox name = "all-accounts" checked = { allVisible } onChange = { toggleAllAccounts } label = { `${ translateRaw ( 'ACCOUNTS_DROPDOWN_ALL_ACCOUNTS' ) }` } /> < Divider / > { renderAccounts ( accounts , draftSelected , contacts , toggleSingleAccount ) } < /ItemContainer>)} < /SDropdown>); } ; export default AccountDropdown ;