import { getPluginDescription } from '../util/general'
import { __ } from '@wordpress/i18n'

export default function TaxonomyList({ categories, styles, types, requiredPlugins }) {
    return <>
        {categories && <div className="w-full pb-4">
            <h3 className="text-sm m-0 mb-2">{__('Categories:', 'extendify-sdk')}</h3>
            <div>{categories.join(', ')}</div>
        </div>}
        {styles && <div className="w-full py-4">
            <h3 className="text-sm m-0 my-2">{__('Styles:', 'extendify-sdk')}</h3>
            <div>{styles.join(', ')}</div>
        </div>}
        {types && <div className="w-full py-4">
            <h3 className="text-sm m-0 my-2">{__('Types:', 'extendify-sdk')}</h3>
            <div>{types.join(', ')}</div>
        </div>}
        {/* // Hardcoded temporarily to not force EP install */}
        {/* {requiredPlugins && <div className="pt-4 w-full"> */}
        {requiredPlugins.filter((p) => p !== 'editorplus').length > 0 && <div className="pt-4 w-full">
            <h3 className="text-sm m-0 my-2">{__('Required Plugins:', 'extendify-sdk')}</h3>
            <div>
                {
                    // Hardcoded temporarily to not force EP install
                    // requiredPlugins.map(p => getPluginDescription(p)).join(', ')
                    requiredPlugins.filter((p) => p !== 'editorplus').map(p => getPluginDescription(p)).join(', ')
                }
            </div>
        </div>}
        <div className="py-4 mt-4">
            <a
                href={`https://extendify.com/what-happens-when-a-template-is-added?utm_source=${window.extendifySdkData.source}&utm_medium=library&utm_campaign=sidebar`}
                rel="noreferrer"
                target="_blank">
                {__('What happens when a template is added?', 'extendify-sdk')}
            </a>
        </div>
    </>
}
