import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { isLoadingSelector } from '../redux/selectors';
import { getItemAction, saveItemAction } from '../redux/slices';

import { Form, FormContent, FormSection } from '@/modules/@common/Form';
import GeneralTab from './Tabs/GeneralTab/GeneralTab';
import { Button, Stack, Tab, TabContent, Tabs, Typography } from '@/mui/components';

import styles from '@/modules/users/Editor/components/Editor.module.scss';

const TAB_ID = 'GeneralTab';

const tabs = [
  {
    title: 'Main',
    id: TAB_ID,
    content: GeneralTab,
  },
].filter(Boolean);

export default function Notifications() {
  const dispatch = useDispatch();

  const isLoading = useSelector(isLoadingSelector);

  const handleSave = () => dispatch(saveItemAction());

  useEffect(() => {
    dispatch(getItemAction());
  }, []);

  return (
    <div className={styles.Wrapper}>
      <Stack direction="column" fullWidth justifyContent="center" className={styles.Title}>
        <Typography component="div" variant="h6" noWrap>
          AnyClip Notifications
        </Typography>
      </Stack>
      <Stack
        spacing={1}
        fullWidth
        direction="row"
        alignItems="center"
        justifyContent="space-between"
        className={styles.Controls}
      >
        {tabs.length > 1 && (
          <Tabs value={TAB_ID} className={styles.Tabs}>
            {tabs.map((tab) => (
              <Tab key={tab.id} label={tab.title} value={tab.id} />
            ))}
          </Tabs>
        )}
        <Stack spacing={2} justifyContent="flex-end" alignItems="center" direction="row">
          <Button
            variant="contained"
            size="small"
            color="primary"
            shape="rounded"
            onClick={handleSave}
            disabled={isLoading}
          >
            Save
          </Button>
        </Stack>
      </Stack>
      {!isLoading && (
        <Form>
          <FormContent>
            {tabs.map((tab) => {
              const Content = tab.content;

              return (
                <TabContent key={tab.id} component={FormContent} selectedId={TAB_ID} id={tab.id}>
                  <FormSection>
                    <Content />
                  </FormSection>
                </TabContent>
              );
            })}
          </FormContent>
        </Form>
      )}
    </div>
  );
}
