import React from 'react';
import { useDispatch } from 'react-redux';

import { getImportsString } from '../helpers';
import { notifyAction } from '@/modules/@common/notify/redux/slices';

import Playground from '../Playground/Playground';
import { Button } from '@/mui/components';

const longText =
  'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ' +
  "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer " +
  'took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,' +
  ' but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the ' +
  '1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop ' +
  'publishing software like Aldus PageMaker including versions of Lorem Ipsum';

function SnackbarSection() {
  const dispatch = useDispatch();

  return (
    <Playground
      title="Notistack (Snackbar/Tostify)"
      initialState={[
        {
          type: 'select',
          stateId: 'horizontalPosition',
          options: ['left', 'center', 'right'],
          selected: 'left',
        },
        {
          type: 'select',
          stateId: 'verticalPosition',
          options: ['bottom', 'top'],
          selected: 'bottom',
        },
        {
          type: 'checkbox',
          stateId: 'persist',
          selected: false,
        },
        {
          type: 'input-number',
          stateId: 'autoHideDuration',
          selected: 5000,
        },
        {
          type: 'input-text',
          stateId: 'message',
          selected: 'Success Notification',
        },
        {
          type: 'select',
          stateId: 'variant',
          options: ['error', 'info', 'success', 'warning'],
          selected: 'success',
        },
        {
          type: 'checkbox',
          stateId: 'longText',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'preventDuplicate',
          selected: true,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          longText: undefined,
          verticalPosition: undefined,
          horizontalPosition: undefined,
          persist: state.persist || undefined,
          autoHideDuration: !state.persist ? state.autoHideDuration : undefined,
          anchorOrigin: {
            vertical: state.verticalPosition,
            horizontal: state.horizontalPosition,
          },
          onClose: (/* event, reason, myKey */) => {
            // console.log(event, reason, myKey)
          },
          onExited: (/* event, myKey */) => {
            // console.log(event, myKey)
          },
        };

        Object.entries(props).forEach(([key, value]) => {
          if (value === undefined) {
            delete props[key];
          }
        });

        const propsString = JSON.stringify(props, null, 2);

        const importsList = getImportsString([[['Button', 'IconButton']], [['Close'], '@mui/icons-material']]);

        return {
          component: (
            <Button
              variant="outlined"
              color={state.variant}
              onClick={() => {
                dispatch(
                  notifyAction({
                    ...props,
                  }),
                );
              }}
            >
              {state.variant}
            </Button>
          ),
          code: `${importsList}
<Button
  variant="outlined"
  color="${state.variant}"
  onClick={() => notifyAction({${propsString}})}
>
  ${state.variant}
</Button>`,
        };
      }}
      onChange={(nextState, id, value, setState) => {
        if (id === 'variant' && value) {
          setState({
            ...nextState,
            message: `${value} ${nextState.longText ? longText : 'Notification'}`,
          });
        } else if (id === 'persist' && value) {
          setState({
            ...nextState,
            autoHideDuration: 0,
          });
        } else if (id === 'persist' && !value) {
          setState({
            ...nextState,
            autoHideDuration: 5000,
          });
        } else if (id === 'autoHideDuration' && value) {
          setState({
            ...nextState,
            persist: false,
          });
        }

        if (id === 'longText' && value) {
          setState({
            ...nextState,
            message: `${nextState.variant} ${longText}`,
          });
        } else if (id === 'longText' && !value) {
          setState({
            ...nextState,
            message: `${nextState.variant} Notification`,
          });
        } else if (id === 'message' && value) {
          setState({
            ...nextState,
            longText: false,
          });
        }
      }}
    />
  );
}

export default SnackbarSection;
