import React from 'react'
import fetchInstalledTemplateKits from '../../api/fetchInstalledTemplateKits'
import styles from './TemplateKitSwitcher.module.scss'

const TemplateKitSwitcher = ({ currentKitId, handleChangeKitId }) => {
  const importedKits = fetchInstalledTemplateKits()
  return (
    <>
      {!importedKits.loading && importedKits.data && importedKits.data.length > 1 ? (
        <div className={styles.currentKit}>
          <div className={styles.optionKitWrapper}>
            <div className={styles.optionKit}>
              <button
                className={`${styles.optionKitLink} ${currentKitId === 'all' ? styles.optionKitLinkCurrent : ''}`} onClick={() => {
                  handleChangeKitId('all')
                }}
              >All Kits
              </button>
            </div>
            {importedKits.data.map(item => (
              <div className={styles.optionKit} key={item.id}>
                <button
                  className={`${styles.optionKitLink} ${currentKitId === item.id ? styles.optionKitLinkCurrent : ''}`} onClick={() => {
                    handleChangeKitId(item.id)
                  }}
                >
                  {item.title}
                </button>
              </div>
            ))}
          </div>
        </div>
      ) : null}
    </>
  )
}

export default TemplateKitSwitcher