import styles from './Form.module.css'
import {useRouter} from "next/router";
import useTranslation from 'next-translate/useTranslation'
import mp3Codes from "../../public/json/mp3Code.json";
import hdCodes from "../../public/json/hdCode.json";

import { useAlert } from 'react-alert'
import {useState} from "react";
import {Input} from "rsuite";
import Button from "../Button/Button";

type Props = {

}

export default function Form(props: Props) {
    const router = useRouter()
    const alert = useAlert()
    const { t, lang } = useTranslation('common')

    const [code, setCode] = useState('')
    const [code2, setCode2] = useState('')

    function createMarkup(value) {
        return {__html: t(value)};
    }

    const submitForm1 = (e) => {
        if (e)
        e.preventDefault()

        if (mp3Codes.includes(code)) {
            alert.success(t('DOWNLOAD_START'))
            setCode('')
            router.push('https://www.sonetsoin.com/MP3_APP/Lichen_MP3.zip')
        } else {
            alert.error(t('WRONG_CODE'))
        }
    }

    const submitForm2 = (e: any) => {
        if (e)
        e.preventDefault()

        if (hdCodes.includes(code2)) {
            alert.success(t('DOWNLOAD_START'))

            router.push('https://www.sonetsoin.com/MP3_APP/Lichen_lossless.zip')
        } else {
            alert.error(t('WRONG_CODE'))
        }
    }

    return (
        <>

            <div dangerouslySetInnerHTML={createMarkup('DOWNLOAD_1')}></div>
            <form className={styles.form} onSubmit={submitForm1}>
                <Input style={{ color: '#000', width: '100%',  marginBottom: 16, alignSelf: "center" }} value={code}  onChange={setCode} />
                <Button onClick={() => submitForm2(undefined)} title={t('DOWNLOAD')} ></Button>
            </form>
            <div dangerouslySetInnerHTML={createMarkup('DOWNLOAD_2')}></div>
            <form className={styles.form} onSubmit={submitForm2}>
                <Input style={{ color: '#000', width: '100%', marginBottom: 16, alignSelf: "center" }} value={code2}  onChange={setCode2} />
                <Button onClick={() => submitForm2(undefined)} title={t('DOWNLOAD')} ></Button>
            </form>
        </>
    )
}