import { CouponsPlus } from "./globals";
import replaceStrings from "./replaceStrings";

const ChangelogPanel = () => {
    return (
        <div className="flex flex-col w-full items-center">
            <img src={CouponsPlus.branding.logo.dark} className="border-none w-46 mt-8 opacity-[0.8]" alt="Coupons+ logo"/>
            <div className="mt-2 flex flex-col max-w-140 whitespace-pre-wrap text-gray-550">
                {replaceStrings(CouponsPlus.changelog, /(\d+\.\d+\.\d+ - \w+ \d{1,2}, \d{4})/g, match => (
                    <div className="mb-3 mt-7 text-2x text-gray-650">{match}</div>
                )).map(string => {
                    if (typeof string !== 'string') {
                        //this is an element
                        return string
                    }
                    return string.split("\n").map(line => {
                        return (
                            <div className="flex flex-row items-start mb-2 space-x-1">
                                {replaceStrings(line, /(\-\w+\:)/g, match => (
                                    <div className="min-w-18">
                                        <span className="inline-flex px-3 rounded-full bg-gray-300">
                                            {match.replace('-', '').replace(':', '')}
                                        </span>
                                    </div>
                                )).filter(line => !!line).map(line => {
                                    if (typeof line !== 'string') {
                                        //this is an element (the NEW! tag etc)
                                        return line
                                    }
                                    // this is the definition!
                                    return (
                                        <span className="inline-flex">
                                            {line.replace(/(\-\w+\:)/g, '')}
                                        </span>
                                    )
                                })}
                            </div>
                        )})
                })}
            </div>
        </div>
    )
}

ChangelogPanel.label = __('Changelog',window.CouponsPlus.textDomain)
ChangelogPanel.aside = true
ChangelogPanel.getIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>


export default ChangelogPanel;