import { useSettingsStore, Settings as SettingsType } from '@kevisual/resources/pages/store/settings';
import { Box, Typography, TextField, useTheme, Button } from '@mui/material';
import { useEffect, useState } from 'react';
import { Settings as SettingsIcon } from 'lucide-react';
export const FormText = ({
  label,
  name,
  value,
  onChange,
  disabled,
  focused,
}: {
  label?: string;
  name?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  disabled?: boolean;
  focused?: boolean;
}) => {
  const theme = useTheme();
  return (
    <TextField
      label={label}
      variant='outlined'
      id={label}
      name={name || label}
      value={value || ''}
      onChange={onChange}
      fullWidth
      disabled={disabled}
      focused={focused}
    />
  );
};
export const Settings = () => {
  const { settings, updateSettings } = useSettingsStore();
  const [config, setConfig] = useState<SettingsType>({});
  useEffect(() => {
    setConfig(settings);
  }, [settings]);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let { name, value } = e.target;
    name = name.toLowerCase();
    setConfig({ ...config, [name]: value });
  };
  const theme = useTheme();
  const handleSave = async () => {
    updateSettings(config);
  };
  return (
    <Box
      sx={{
        padding: 2,
        backgroundColor: 'white',
        borderRadius: 2,
        boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
        width: '80%',
        // maxWidth: '600px',
        margin: '0 auto',
        marginTop: 4,
        [theme.breakpoints.down('sm')]: {
          width: '90%',
        },
      }}>
      <div className='flex items-center gap-3 mb-8'>
        <SettingsIcon className='w-8 h-8 text-amber-600' />
        <Typography
          variant='h1'
          className='text-amber-900'
          sx={{
            fontSize: { xs: '1.3rem', sm: '2rem' },
            fontWeight: 'bold',
          }}>
          Upload Settings
        </Typography>
      </div>
      <form>
        <Box mb={2}>
          <FormText label='Key' value={config.key} onChange={handleChange} focused={true} />
        </Box>
        <Box mb={2}>
          <FormText label='Version' value={config.version} onChange={handleChange} disabled={false} />
        </Box>
        {/* <Box mb={2}>
          <FormText label='Username' value={config.username} onChange={handleChange} disabled={true} />
        </Box> */}
        <Box mb={2}>
          <FormText label='Prefix' value={config.prefix} onChange={handleChange} disabled={true} />
        </Box>
        <Box mb={2}>
          <Button
            variant='contained'
            sx={{
              color: 'white',
            }}
            onClick={handleSave}>
            保存
          </Button>
        </Box>
      </form>
    </Box>
  );
};
