hensei-web/components/Button/index.tsx

import React, { PropsWithChildren, useEffect, useState } from 'react'
import classNames from 'classnames'

import Link from 'next/link'

import AddIcon from '~public/icons/Add.svg'
import CheckIcon from '~public/icons/LargeCheck.svg'
import CrossIcon from '~public/icons/Cross.svg'
import EditIcon from '~public/icons/Edit.svg'
import LinkIcon from '~public/icons/Link.svg'
import MenuIcon from '~public/icons/Menu.svg'
import SaveIcon from '~public/icons/Save.svg'
import SettingsIcon from '~public/icons/Settings.svg'

import './index.scss'

import { ButtonType } from '~utils/enums'
import { access } from 'fs'

interface Props
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
  accessoryIcon?: React.ReactNode
  active?: boolean
  blended?: boolean
  contained?: boolean
  size?: 'small' | 'medium' | 'large'
  text?: string
}

const defaultProps = {
  active: false,
  blended: false,
  contained: false,
  size: 'medium',
}

const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
  { accessoryIcon, active, blended, contained, size, text, ...props },
  forwardedRef
) {
  const classes = classNames(
    {
      Button: true,
      Active: active,
      Blended: blended,
      Contained: contained,
      // 'btn-pressed': pressed,
      // 'btn-disabled': disabled,
      // save: props.icon === 'save',
      // destructive: props.type == ButtonType.Destructive,
    },
    size,
    props.className
  )

  const hasAccessory = () => {
    if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
  }

  const hasText = () => {
    if (text) return <span className="Text">{text}</span>
  }

  return (
    <button {...props} className={classes} ref={forwardedRef}>
      {hasAccessory()}
      {hasText()}
    </button>
  )

  // useEffect(() => {
  // if (props.type) setButtonType(props.type)
  // }, [props.type])

  // const addIcon = (
  //   <span className="icon">
  //     <AddIcon />
  //   </span>
  // )

  // const menuIcon = (
  //   <span className="icon">
  //     <MenuIcon />
  //   </span>
  // )

  // const linkIcon = (
  //   <span className="icon stroke">
  //     <LinkIcon />
  //   </span>
  // )

  // const checkIcon = (
  //   <span className="icon check">
  //     <CheckIcon />
  //   </span>
  // )

  // const crossIcon = (
  //   <span className="icon">
  //     <CrossIcon />
  //   </span>
  // )

  // const editIcon = (
  //   <span className="icon">
  //     <EditIcon />
  //   </span>
  // )

  // const saveIcon = (
  //   <span className="icon stroke">
  //     <SaveIcon />
  //   </span>
  // )

  // const settingsIcon = (
  //   <span className="icon settings">
  //     <SettingsIcon />
  //   </span>
  // )

  // function getIcon() {
  //   let icon: React.ReactNode

  //   switch (props.icon) {
  //     case 'new':
  //       icon = addIcon
  //       break
  //     case 'menu':
  //       icon = menuIcon
  //       break
  //     case 'link':
  //       icon = linkIcon
  //       break
  //     case 'check':
  //       icon = checkIcon
  //       break
  //     case 'cross':
  //       icon = crossIcon
  //       break
  //     case 'edit':
  //       icon = editIcon
  //       break
  //     case 'save':
  //       icon = saveIcon
  //       break
  //     case 'settings':
  //       icon = settingsIcon
  //       break
  //   }

  //   return icon
  // }

  // function handleMouseDown() {
  //   setPressed(true)
  // }

  // function handleMouseUp() {
  //   setPressed(false)
  // }
  // return (
  //   <button
  //     className={classes}
  //     disabled={disabled}
  //     onMouseDown={handleMouseDown}
  //     onMouseUp={handleMouseUp}
  //     ref={forwardedRef}
  //     {...props}
  //   >
  //     {getIcon()}

  //     {props.type != ButtonType.IconOnly ? (
  //       <span className="text">{children}</span>
  //     ) : (
  //       ''
  //     )}
  //   </button>
  // )
})

Button.defaultProps = defaultProps

export default Button