36-character-flower/src/features/game/modal/desktop/desktop-auto-setting-modal.tsx

import { useTranslation } from 'react-i18next'
import lengthBlueBtn from '@/assets/system/length-blue-btn.webp'
import { CenterModal } from '@/components/center-modal.tsx'
import { SmartBackground } from '@/components/smart-background.tsx'
import { Input } from '@/components/ui/input.tsx'
import { Switch } from '@/components/ui/switch.tsx'
import { useModalStore } from '@/store'

const AUTO_STOP_ROWS = [
  {
    labelKey: 'game.modals.autoSetting.rows.stopIfBalanceLowerThan',
    value: '0',
    checked: false,
  },
  {
    labelKey: 'game.modals.autoSetting.rows.stopIfSingleWinExceeds',
    value: '50000',
    checked: true,
  },
  {
    labelKey: 'game.modals.autoSetting.rows.stopOnAnyJackpot',
    // value: '50000',
    checked: false,
  },
] as const

function DesktopAutoSettingModal() {
  const { t } = useTranslation()
  const open = useModalStore((state) => state.modals.desktopAutoSetting)
  const setModalOpen = useModalStore((state) => state.setModalOpen)

  function handleSubmit() {
    setModalOpen('desktopAutoSetting', false)
  }

  return (
    <CenterModal
      open={open}
      onClose={handleSubmit}
      title={
        <div className={'modal-title-glow text-design-26 uppercase'}>
          {t('game.modals.autoSetting.title')}
        </div>
      }
      isNormalBg={true}
      titleAlign="left"
      className={'w-design-835 !h-design-500'}
    >
      <div
        className={
          'flex h-full w-full flex-col justify-between px-design-18 pt-design-30 pb-design-60'
        }
      >
        <div className={'flex w-full flex-col gap-design-26'}>
          {AUTO_STOP_ROWS.map((row) => (
            <div
              key={row.labelKey}
              className={'flex items-center justify-between gap-design-30'}
            >
              <div
                className={
                  'w-design-300 shrink-0 text-design-22 leading-[1.1] text-[#9CF7FF]'
                }
              >
                {t(row.labelKey)}
              </div>

              {'value' in row ? (
                <div
                  className={
                    'game-setting-input-shell flex h-design-58 w-design-410 items-center justify-between pl-design-18 pr-design-10'
                  }
                >
                  <Input
                    defaultValue={row.value}
                    className={
                      'game-setting-input h-full w-design-280 text-design-18'
                    }
                  />
                  <Switch size={'sm'} defaultChecked={row.checked} />
                </div>
              ) : (
                <div className={'flex w-design-410 justify-end pr-design-2'}>
                  <Switch size={'sm'} defaultChecked={row.checked} />
                </div>
              )}
            </div>
          ))}
        </div>

        <div className={'flex w-full justify-center'}>
          <SmartBackground
            src={lengthBlueBtn}
            size="100% 100%"
            repeat="no-repeat"
            position="center"
            className={
              'w-design-300 h-design-72 pb-design-4 flex items-center justify-center text-design-24 font-bold tracking-wide text-[#E7FBFF]'
            }
          >
            {t('game.modals.autoSetting.startAutoSpin')}
          </SmartBackground>
        </div>
      </div>
    </CenterModal>
  )
}

export default DesktopAutoSettingModal