flexor-web/src/app/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 '../../hooks'
import { setFieldValue } from '../../actions/forms'
import { setTheme } from '../../actions/theme'
import { getFieldValue } from '../../selectors/forms'
import { AppState, Theme, ColorScheme } from '../../types'

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

export interface Props {
    name: string
    label: string
}

const ThemeField: FC<Props> = ({ name, label }) => {
    const theme = useTheme()
    const value = useSelector<AppState, string>(state => getFieldValue<string>(state, name, ''))
    const [displayedName, setDisplayedName] = useState(value)
    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))
        setDisplayedName(name)
    }

    const handleMouseLeave = () => {
        dispatch(setTheme(value))
        setDisplayedName(value)
    }

    useEffect(() => {
        setDisplayedName(value)
    }, [value])

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

export default ThemeField