flexor-web/src/components/controls/theme-field.tsx

import React, { FC, useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import capitalize from 'lodash/capitalize'
import { useTheme } from 'src/hooks'
import { setFieldValue } from 'src/actions/forms'
import { setTheme } from 'src/actions/theme'
import { getFieldValue } from 'src/selectors/forms'
import { getThemeName } from 'src/selectors/theme'
import { AppState, Theme, ColorScheme } from 'src/types'

import FieldLabel from 'src/components/controls/field-label'
import themes from 'src/themes'

export interface Props {
    name: string
    label: string
}

const ThemeField: FC<Props> = ({ name, label }) => {
    const currentTheme = useTheme()
    const currentThemeName = useSelector<AppState, string>(getThemeName)
    const [previousThemeName, setPreviousThemeName] = useState('')
    const value = useSelector<AppState, string>(state => getFieldValue<string>(state, name, ''))
    const dispatch = useDispatch()

    const themeList = Object.entries(themes).map(([name, schemes]) => {
        return [name, schemes[ColorScheme.Light]] as [string, Theme]
    })

    const handleMouseEnter = (name: string) => {
        dispatch(setTheme(name))
    }

    const handleMouseLeave = () => {
        dispatch(setTheme(previousThemeName))
    }

    useEffect(() => {
        setPreviousThemeName(currentThemeName)
    }, [])

    return (
        <div className="field">
            <FieldLabel>{label}</FieldLabel>
            <div className="control">
                <div className="theme-picker">
                    {themeList.map(([themeName, theme]) => (
                        <div
                            style={{ backgroundColor: theme.primary, borderColor: themeName === value ? currentTheme.red : currentTheme.secondary }}
                            onMouseEnter={() => handleMouseEnter(themeName)}
                            onMouseLeave={() => handleMouseLeave()}
                            onClick={() => dispatch(setFieldValue(name, themeName))}></div>
                    ))}
                </div>
                <div style={{ color: currentTheme.primary }}>{capitalize(currentThemeName)}</div>
            </div>
        </div>
    )
}

export default ThemeField