/* eslint-disable no-console, no-undef, react/prop-types, react/react-in-jsx-scope, react/jsx-no-undef */

const capitalize = (s) => s[0].toUpperCase() + s.slice(1, s.length)

const layouts = ['full']
const types = ['primary', 'secondary', 'accent', 'ghost', 'flat']
const sizes = ['small', 'medium', 'large']

const Icon = (
  <svg className='sui-ButtonPrimary-icon' x='0px' y='0px' viewBox='-139 12.7 320 276.3'><path strokeWidth='20' d='M21.1,61.3c0,0,3.9-5.2,6-7.6c7.6-8.8,16.7-16.2,26.8-21.3 c10.1-5.2,21.2-8.1,32.8-8.1s22.7,2.4,32.8,6.6c10.1,4.3,19.2,10.5,26.8,18.1c7.6,7.6,13.8,16.7,18.1,26.8S171,97,171,108.6 s-2.4,22.8-6.6,32.8c-4.3,10.1-10.4,19.2-18.1,26.8c-7.5,7.7-125.2,109.2-125.2,109.2l0,0l0,0c0,0-117.7-101.5-125.3-109.1 c-7.6-7.6-13.8-16.7-18.1-26.8c-4.3-10.1-6.6-21.2-6.6-32.8s2.4-22.8,6.6-32.8c4.3-10.1,10.4-19.2,18.1-26.8 c7.6-7.6,16.7-13.8,26.8-18.1s21.2-6.6,32.8-6.6s22.8,2.9,32.8,8.1C-1.7,37.7,7.4,45,15,53.8C15.1,53.7,17.8,56.8,21.1,61.3z'/></svg>
)

const demoButtons = types.reduce((acc, type) => {
  acc.push(<h2>Button {capitalize(type)}</h2>)

  sizes.forEach(size => {
    acc.push(
      <ButtonBasic
        key={type + size}
        text={`Button ${capitalize(type)} ${capitalize(size)}`}
        size={size}
        type={type}
      />
    )

    acc.push(
      <ButtonBasic
        icon={Icon}
        key={type + size + 'icon'}
        text={`Button ${capitalize(type)} ${capitalize(size)} with Icon`}
        size={size}
        type={type}
      />
    )

    acc.push(
      <ButtonBasic
        disabled
        icon={Icon}
        key={type + size + 'disabled'}
        size={size}
        text={`Button ${capitalize(type)} ${capitalize(size)} disabled`}
        type={type}
      />
    )

    layouts.forEach(layout => {
      acc.push(
        <ButtonBasic
          key={type + size + layout}
          layout={layout}
          size={size}
          text={`Button ${capitalize(type)} ${capitalize(size)} ${layout}`}
          type={type}
        />
      )
    })
  })
  return acc
}, [])

return (
  <div>
    <h2>Button default</h2>
    <ButtonBasic text='Default Button' />
    {demoButtons}
  </div>
)
