import { useState, useEffect } from '@wordpress/element'
import Button from '../button/Button'
import logo from '../../assets/img/logo.png'
import './navs.scss'

/* Inline icons matching the concept artifact. */
const svg = (paths) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: paths }} />
)
const ICONS = {
  welcome: '<path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1Z"/>',
  woo: '<path d="M3 4h2l2.4 12.2a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.8L21 7H6"/><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/>',
  widgets: '<path d="M12 2 3 7l9 5 9-5-9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/>',
  modules: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 7 19.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 3 13.6H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.8 7l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 10 4.6V4a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9Z"/>',
  fonts: '<path d="M4 7V5h16v2"/><path d="M9 20h6"/><path d="M12 5v15"/>',
  importexport: '<path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>',
}

function Navs({ navTo, hash }) {
  const [navs, setNavs] = useState(null);

  useEffect(() => {
    setNavs([
      { hash: '#welcome', title: 'Welcome', icon: svg(ICONS.welcome) },
      { hash: '#woocommerce', title: 'WooCommerce', icon: svg(ICONS.woo) },
      { hash: '#widgets', title: 'Widgets', icon: svg(ICONS.widgets) },
      { hash: '#modules', title: 'Modules', icon: svg(ICONS.modules) },
      { hash: '#custom-fonts', title: 'Custom Fonts', icon: svg(ICONS.fonts) },
      { hash: '#import-export', title: 'Import/Export', icon: svg(ICONS.importexport) },
    ])
  }, []);

  return (
    <>
        {/* <!-- top tab area --> */}
        <div className='strb-d-flex strb-top-nav'>
          <div className='strb-logo'>
            <img src={logo} alt='logo'/>
          </div>
          <div class="strb-panel-tab strb-d-md-inline-block">
              <div class="strb-panel-tab-inner strb-d-flex strb-flex-wrap" >
                  { navs && navs.map(nav => (
                    <a href={nav.hash} onClick={navTo} key={nav.hash}>
                      <Button
                        activeClass={ (hash === nav.hash)? 'active' : ''}
                        btnText={nav.title}
                        icon={nav.icon}
                      />
                    </a>
                  )) }
              </div>
          </div>
        </div>
    </>
  )
}

export default Navs