import React from 'react';
import { TouchableCard } from '../../common/components/touchable-card';
import { Router } from '../../common/utils/navigation-service';
import { ROUTES } from '../../app/constants';
import { theme } from '../../app/theme';
import { SBox } from '../../common/s-components/layout/s-box';
import { SPlaceholder } from '../../common/s-components/s-placeholder';
import { SRow } from '../../common/s-components/layout/s-row';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { Icon } from '../../common/components/icon';
import { SMessage } from '../s-components/s-message';

type TProps = {};

const imageUrl = require('../../../assets/placeholders/push-notifications-off.png');

export const NotificationSettings: React.FC<TProps> = () => {
  return (
    <TouchableCard
      testID="notification-settings-touchable-card"
      onPress={() => {
        Router.goTo(ROUTES.notificationsettings);
      }}
      mt={2}
      mb={30}
      mx={16}
      borderRadius={8}
      height={112}
      variant="shadow"
      bgStyle={{ bg: theme.colors.eastBay }}
      gradient={{
        tapped: {
          colors: theme.gradients.notificationSettinsCardTapped,
        },
        default: {
          colors: theme.gradients.notificationSettinsCard,
          opacity: 0.4,
        },
      }}
    >
      <SRow px={16} alignItems="center" pt={28}>
        <SPlaceholder width={90} height={56} source={imageUrl} />
        <SBox ml={24} mt={-27}>
          <SMessage mb={11}>
            Enable notifications{'\n'}in Notification Settings.
          </SMessage>
          <SRow alignItems="center">
            <SH3>Go to Settings</SH3>
            <Icon mt={2} ml={9} name="next" size={13} color="white" />
          </SRow>
        </SBox>
      </SRow>
    </TouchableCard>
  );
};