import { MouseEvent } from 'react';

import Option from '../common/Option';
import Switch from '../switch';

export type SwitchOptionProps = {
  checked?: boolean;
  complex?: boolean;
  content?: React.ReactNode;
  disabled?: boolean;
  showMediaCircle?: boolean;
  showMediaAtAllSizes?: boolean;
  isContainerAligned?: boolean;
  id?: string;
  media?: React.ReactNode;
  onChange: (newValue: boolean) => void;
  title: React.ReactNode;
  'aria-label': string;
};

const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
  if (event) {
    event.stopPropagation();
    event.preventDefault();
    event.nativeEvent?.stopImmediatePropagation?.();
  }
};

/**
 * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 * @deprecatedSince 46.104.0
 * @see [Source](../listItem/ListItem.tsx)
 * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
 * @see [Design docs](https://wise.design/components/list-item)
 * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
 */
const SwitchOption = ({
  checked,
  complex,
  content,
  disabled,
  id,
  media,
  onChange,
  title,
  showMediaCircle,
  showMediaAtAllSizes,
  isContainerAligned,
  'aria-label': ariaLabel,
}: SwitchOptionProps) => {
  const sharedProps = {
    media,
    title,
    content,
    complex,
    disabled,
    showMediaCircle,
    showMediaAtAllSizes,
    isContainerAligned,
  };
  const toggle = (event?: MouseEvent<HTMLSpanElement>) => {
    stopPropagation(event);
    if (disabled) {
      return;
    }

    onChange(!checked);
  };

  return (
    <Option
      {...sharedProps}
      className="np-switch-option"
      button={
        <Switch
          id={id}
          checked={checked}
          disabled={disabled}
          aria-label={ariaLabel}
          onClick={toggle}
        />
      }
      onClick={toggle}
    />
  );
};

export default SwitchOption;