import { getCustomTheme, updateCustomTheme } from '@/api/Admin'
import { update } from '@/rtk/helpers/CRUD'
import { get } from '@/rtk/helpers/apiService'
import { javascript } from '@codemirror/lang-javascript'
import { Box, Button, Group, InputLabel, Loader, Text, useComputedColorScheme } from '@mantine/core'
import CodeMirror from '@uiw/react-codemirror'
import { useEffect, useState } from 'react'
import classes from './CustomTheme.module.css'
const CustomTheme = () => {
  const [data, setData] = useState({
    js: '',
    css: '',
  })
  const [textSelect, setTextSelect] = useState('js')
  const [loader, setLoader] = useState(true)
  const [activeBtn, setActiveBtn] = useState(false)
  const computedColorScheme = useComputedColorScheme('light', {
    getInitialValueInEffect: true,
  })
  const getCustomData = async () => {
    try {
      const res = await get(getCustomTheme)
      if (res.data !== null) {
        setData(res.data)
      }
      setLoader(false)
    } catch (error) {
      console.log(error)
    }
  }

  const updateSetting = async () => {
    try {
      await update(updateCustomTheme, data, getCustomData)
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    getCustomData()

  }, [])

  return loader ? (
    <Box ta={'center'}>
      <Loader size={40} mt={'15%'} />
    </Box>
  ) : (
    <>
      <div className={classes.title}>
        <h3>
          <Text>Admin/</Text>
          Custom Theme
        </h3>
        <Group>
          <Button
            bg={textSelect !== 'js' ? 'white' : '#5df59f'}
            variant={textSelect !== 'js' ? 'outline' : 'filled'}
            onClick={() => setTextSelect('js')}
          >
            JS
          </Button>
          <Button
            bg={textSelect !== 'css' ? 'white' : '#5df59f'}
            variant={textSelect !== 'css' ? 'outline' : 'filled'}
            onClick={() => setTextSelect('css')}
          >
            CSS
          </Button>
          <Button
            m={5}
            disabled={activeBtn}
            onClick={async () => {
              setActiveBtn(true)
              await updateSetting()
              setActiveBtn(false)
            }}
          >
            Save
          </Button>
        </Group>
      </div>
      <Box p={20}>
        <div className={classes.box}>
          <div style={{ display: textSelect === 'js' ? 'block' : 'none' }}>
            <InputLabel p={5} size="md">
              JavaScript
            </InputLabel>
            <CodeMirror
              value={data.js ? data.js : ''}
              height="100%"
              className={classes.txtarea}
              extensions={[javascript({ jsx: true })]}
              theme={computedColorScheme === 'light' ? 'light' : 'dark'}
              onChange={(e) => {
                setData({ ...data, js: e })
              }}
            />
          </div>
          <div style={{ display: textSelect === 'css' ? 'block' : 'none' }}>
            <InputLabel p={5} size="md">
              CSS
            </InputLabel>
            <CodeMirror
              value={data.css ? data.css : ''}
              height="100%"
              className={classes.txtarea}
              extensions={[javascript({ jsx: true })]}
              theme={computedColorScheme === 'light' ? 'light' : 'dark'}
              onChange={(e) => {
                setData({ ...data, css: e })
              }}
            />
          </div>
        </div>
      </Box>
    </>
  )
}

export default CustomTheme