import { CheckMarkGhost } from '@/components/icons/checkmark-circle';
import { InfoIconNew } from '@/components/icons/info-icon';
import Badge from '@/components/ui/badge/badge';
import Link from '@/components/ui/link';
import { Routes } from '@/config/routes';
import { useStoreNoticeReadMutation } from '@/graphql/store-notice.graphql';
import { StoreNoticePriorityType } from '@/types/custom-types';
import { getAuthCredentials } from '@/utils/auth-utils';
import { StoreNotice } from '__generated__/__types__';
import cn from 'classnames';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';

type NoticeCardProps = {
  noticeData: StoreNotice;
};

const StoreNoticeCard: React.FC<NoticeCardProps> = ({ noticeData }) => {
  const { t } = useTranslation();
  const { permissions } = getAuthCredentials();
  const router = useRouter();
  const { id, notice, is_read, description, priority } = noticeData;
  const [storeNoticeReadMutation] = useStoreNoticeReadMutation();

  const activeUser = permissions?.includes('super_admin')
    ? Routes?.storeNotice?.details(id)
    : '/shops/' + Routes?.storeNotice?.details(id);

  const onClickHandel = () => {
    router.push(activeUser);
    storeNoticeReadMutation({
      variables: {
        input: {
          id: id,
        },
      },
    });
  };

  return (
    <Link
      href={activeUser}
      className={cn(
        `relative flex flex-col gap-2 rounded-lg border-l-4 p-5 md:flex-row md:gap-6 xl:p-7`,
        is_read ? 'border border-[#E7E7E7] bg-[#F4F4F4]' : 'bg-white',
        {
          'border-l-accent': StoreNoticePriorityType.High === priority,
          'border-l-[#43A5FF]': StoreNoticePriorityType.Medium === priority,
          'border-l-[#F75159]': StoreNoticePriorityType.Low === priority,
        }
      )}
      onClick={onClickHandel}
    >
      <div
        className={cn(`shrink-0 rounded-xl text-4xl lg:text-5xl`, {
          'text-accent': StoreNoticePriorityType.High === priority,
          'text-[#43A5FF]': StoreNoticePriorityType.Medium === priority,
          'text-[#F75159]': StoreNoticePriorityType.Low === priority,
        })}
      >
        <InfoIconNew />
      </div>
      <div className="flex-1">
        <div className="mb-2 flex flex-wrap items-center justify-between gap-2 lg:mb-4 lg:flex-nowrap">
          {notice ? (
            <div className="flex flex-col gap-5 md:flex-row md:items-center">
              <h3 className="text-base font-semibold text-muted-black xl:text-xl">
                {notice?.length >= 100
                  ? notice?.substring(0, 100) + '...'
                  : notice}
              </h3>
              <div>
                <Badge
                  text={priority}
                  className={cn(
                    `rounded-full border border-current bg-opacity-10 py-2 px-3 text-sm font-medium capitalize leading-none`,
                    {
                      'bg-accent text-accent':
                        StoreNoticePriorityType.High === priority,
                      'bg-[#43A5FF] text-[#43A5FF]':
                        StoreNoticePriorityType.Medium === priority,
                      'bg-[#F75159] text-[#F75159]':
                        StoreNoticePriorityType.Low === priority,
                    }
                  )}
                />
              </div>
            </div>
          ) : (
            ''
          )}
          <div
            className={cn(
              'hidden text-xl lg:block',
              {
                'text-accent': StoreNoticePriorityType.High === priority,
                'text-[#43A5FF]': StoreNoticePriorityType.Medium === priority,
                'text-[#F75159]': StoreNoticePriorityType.Low === priority,
              },
              is_read ? 'text-opacity-50' : ''
            )}
          >
            <CheckMarkGhost />
          </div>
        </div>
        {description && (
          <p className="text-sm leading-[175%] text-[#666] lg:text-base">
            {description?.length >= 250
              ? description?.substring(0, 250) + '...'
              : description}
            {description?.length >= 250 ? (
              <span className="font-semibold text-accent">
                {t('common:text-read-more')}
              </span>
            ) : (
              ''
            )}
          </p>
        )}
      </div>
    </Link>
  );
};

export default StoreNoticeCard;
