import { useOnboardingTip } from './hooks';
import { ITipDescriptor } from './types';
import { Tooltip } from '@/components/@extended';
import { Optional } from '@/types';
import { Button, Stack, TooltipProps, Typography, buttonClasses, styled, tooltipClasses } from '@mui/material';
import _ from 'lodash';

type IOnboardingTipProps = TooltipProps & Optional<Pick<ITipDescriptor, 'id' | 'step' | 'completeOnboarding'>, 'step'>;

function BaseOnboardingTip(props: IOnboardingTipProps) {
  const { id, step = 0, title, completeOnboarding } = props;
  const { tip, dismiss } = useOnboardingTip({ id: id, step: step, completeOnboarding: completeOnboarding });
  const { open } = tip;
  const passProps = _.omit(props, ['id', 'step', 'title', 'completeOnboarding']);
  return (
    <Tooltip
      {...passProps}
      arrow={true}
      // @ts-ignore
      open={open}
      title={
        <Stack gap={1}>
          <Typography>{title}</Typography>
          <Button onClick={dismiss} variant="text" color="primary" size="small">
            Got it!
          </Button>
        </Stack>
      }
    >
      {props.children}
    </Tooltip>
  );
}

const OnboardingTip = styled(BaseOnboardingTip)(({ theme }) => {
  const { palette, spacing } = theme;
  const { primary, background } = palette;
  return {
    [`& .${tooltipClasses.tooltip}`]: {
      padding: `${spacing(1)} ${spacing(1.5)}`,
      backgroundColor: primary.main,
      color: primary.contrastText,
      [`& .${buttonClasses.root}`]: {
        backgroundColor: background.paper
      }
    },
    [`& .${tooltipClasses.arrow}`]: {
      color: primary.main
    }
  };
});

export { OnboardingTip };