import { useState } from 'react';
import { Button } from '../../Atoms/Button/Button';
import { ModalUnidadOrganizativa } from './ModalUnidadOrganizativa';
import {
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_EMPRESA_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_NODO_PADRE_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_RESPONSABLE_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES,
} from './modalUnidadOrganizativaDefaults';

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

export const Default = {
  render: function UnidadOrganizativaStory() {
    const [open, setOpen] = useState(true);
    const [values, setValues] = useState(MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES);

    return (
      <div style={{ minHeight: '100vh', padding: 24 }}>
        <Button onClick={() => setOpen(true)}>Abrir nueva unidad</Button>
        <ModalUnidadOrganizativa
          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('Crear unidad', payload);
            setOpen(false);
          }}
          empresaOptions={MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_EMPRESA_OPTIONS}
          nodoPadreOptions={MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_NODO_PADRE_OPTIONS}
          responsableOptions={MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_RESPONSABLE_OPTIONS}
        />
      </div>
    );
  },
};

export const Abierto = {
  args: {
    isOpen: true,
    onClose: () => undefined,
  },
};

export const PantallaCorta = {
  name: 'Pantalla corta (scroll verde)',
  parameters: {
    viewport: { defaultViewport: 'mobile1' },
  },
  render: function PantallaCortaStory() {
    const [open, setOpen] = useState(true);
    const [values, setValues] = useState(MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES);

    return (
      <ModalUnidadOrganizativa
        isOpen={open}
        onClose={() => setOpen(false)}
        values={values}
        onFieldChange={(field, value) => setValues((prev) => ({ ...prev, [field]: value }))}
        onSubmit={() => setOpen(false)}
        empresaOptions={MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_EMPRESA_OPTIONS}
        nodoPadreOptions={MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_NODO_PADRE_OPTIONS}
        responsableOptions={MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_RESPONSABLE_OPTIONS}
      />
    );
  },
};
