import { Button, Dialog, DialogContent, DialogTitle, FormControlLabel, TextField } from '@mui/material';
import { useState } from 'react';
import { useMetaStore } from './MetaForm';
export const DialogKey = ({ onAdd }: { onAdd: (key: string) => void }) => {
  const { openPropertyModal, setOpenPropertyModal } = useMetaStore();
  const [key, setKey] = useState('');
  return (
    <Dialog open={openPropertyModal} onClose={() => setOpenPropertyModal(false)}>
      <DialogTitle>添加元数据key</DialogTitle>
      <DialogContent>
        <div className='flex flex-col items-center gap-3 px-4 pb-4'>
          <FormControlLabel
            label='key'
            labelPlacement='top'
            control={<TextField variant='outlined' size='small' name={key} value={key} onChange={(e) => setKey(e.target.value)} />}
            sx={{
              alignItems: 'flex-start',
              '& .MuiFormControlLabel-label': {
                textAlign: 'left',
                width: '100%',
              },
            }}
          />
          <Button
            variant='contained'
            color='primary'
            style={{ color: 'white' }}
            onClick={() => {
              onAdd(key);
              setKey('');
              setOpenPropertyModal(false);
            }}>
            添加
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};