import { useState } from 'react';
import { Button } from '../../Atoms/Button/Button';
import { ModalAsignarPersona } from './ModalAsignarPersona';
import { MODAL_ASIGNAR_PERSONA_DEFAULT_VALUES } from './modalAsignarPersonaDefaults';

export default {
  title: 'Layout/ModalAsignarPersona',
  component: ModalAsignarPersona,
  tags: ['autodocs'],
  parameters: { layout: 'fullscreen' },
};

export const Default = {
  render: function ModalAsignarPersonaStory() {
    const [open, setOpen] = useState(true);
    const [values, setValues] = useState({
      ...MODAL_ASIGNAR_PERSONA_DEFAULT_VALUES,
      unidadId: 'unit-rrhh',
    });

    return (
      <div style={{ minHeight: '100vh', padding: 24 }}>
        <Button onClick={() => setOpen(true)}>Abrir asignar persona</Button>
        <ModalAsignarPersona
          isOpen={open}
          onClose={() => setOpen(false)}
          values={values}
          onFieldChange={(field, value) => setValues((prev) => ({ ...prev, [field]: value }))}
          onSubmit={(payload) => {
            // eslint-disable-next-line no-console
            console.log('Asignar persona', payload);
            setOpen(false);
          }}
        />
      </div>
    );
  },
};
