import { forwardRef, useMemo } from 'react';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { ReceiveMessageOption } from 'tuikit-atomicx-react/chat';
import { useUIContext } from 'tuikit-atomicx-react/chat';
import { View } from 'tuikit-atomicx-react/chat';
import { Divider } from '../../Divider';
import { SettingItem } from '../../SettingItem';
import classes from './PersonalSettings.module.scss';

interface PersonalSettingsProps {
  className?: string;
}

const PersonalSettings = forwardRef<HTMLDivElement, PersonalSettingsProps>((props, ref) => {
  const { className } = props;
  const { t } = useUIKit();
  const {
    activeConversationID,
    activeConversation,
    pinConversation,
    setReceiveMessageOpt,
  } = useUIContext();

  const isMuted = activeConversation
    ? activeConversation.receiveOption !== ReceiveMessageOption.Receive
    : undefined;
  const isPinned = activeConversation?.isPinned;

  return (
    <View
      ref={ref}
      className={cs(classes['personal-settings'], className)}
    >
      {isMuted !== undefined && (
        <SettingItem
          className={classes['personal-settings__mute-switch']}
          label={t('ChatSetting.mute_conversation')}
          type="switch"
          value={isMuted}
          onChange={(value: boolean) => {
            if (!activeConversationID) return;
            setReceiveMessageOpt(
              activeConversationID,
              value ? ReceiveMessageOption.NotNotify : ReceiveMessageOption.Receive,
            );
          }}
        />
      )}

      {isMuted !== undefined && isPinned !== undefined && <Divider variant="line" />}

      {isPinned !== undefined && (
        <SettingItem
          className={classes['personal-settings__pin-switch']}
          label={t('ChatSetting.pin_conversation')}
          type="switch"
          value={isPinned}
          onChange={(value: boolean) => {
            if (!activeConversationID) return;
            pinConversation(activeConversationID, value);
          }}
        />
      )}
    </View>
  );
});

PersonalSettings.displayName = 'PersonalSettings';

export { PersonalSettings };