import {useToggle} from '@any-ui/core'
import InputAdornment from '@material-ui/core/InputAdornment'
import React, {ElementType, ReactNode} from 'react'

export type TAdornmentButtonState = [boolean, ReactNode]
export type TUseAdornmentButton = (
  component: ElementType,
  initial: boolean
) => TAdornmentButtonState

export const useAdornmentButton: TUseAdornmentButton = (Component, initial) => {
  const [value, toggleValue] = useToggle(initial)
  return [
    value,
    <InputAdornment key='' position="end">
      <Component key="adornmentButtonKey" onClick={toggleValue} value={value} />
    </InputAdornment>,
  ]
}