import React from 'react';
import { useCurrentAction } from '../store';
import {
  FlagAlert,
  formatUtcToLocal,
} from '@bjsdistribution/dms-component-library';
import styled from 'styled-components';
import { useReminderRefId } from '../order-actions/store';
import { getDay } from '../order-actions/utils';

function ReminderTemplate({ data, dismissReminder }: any) {
  const [, setCurrentAction] = useCurrentAction();
  const [, setReminderRefId] = useReminderRefId();
  const openModal = () => {
    setCurrentAction('view-reminder');
  };

  //getting particular reminder data
  const handleClick = (Id: number) => {
    setReminderRefId(Id);
    openModal();
  };

  const type =
    data?.status === true
      ? 'success'
      : data?.status === false
      ? 'warn'
      : 'info';

  const titleColor =
    data?.status === true
      ? '#36A053'
      : data?.staus === false
      ? '#FEBA30'
      : '#3A3630';

  return (
    <div>
      <StyledAlert>
        <FlagAlert
          type={type}
          title={
            <>
              <StyledTitle color={titleColor}>
                Reminder:
                <StyledLink onClick={() => handleClick(data.id)}>
                  {data?.reference || 'NA'}
                </StyledLink>{' '}
                (Due - {getDay(data?.due_datetime)},{' '}
                {`${formatUtcToLocal(data?.due_datetime).date} ${
                  formatUtcToLocal(data?.due_datetime).time
                }`}
                ), Assigned to: {data?.assigned_to} Completed On:{' '}
                {getDay(data?.completed_at)},{' '}
                {`${formatUtcToLocal(data?.completed_at).date} ${
                  formatUtcToLocal(data?.completed_at).time
                }`} By: {data?.completed_by}
              </StyledTitle>
            </>
          }
          description={`${data?.description}`}
          showOkButton={false}
          onClose={() => dismissReminder(data.id)}
        />
      </StyledAlert>
    </div>
  );
}
const StyledAlert = styled.div`
  margin-bottom: 10px;
`;

const StyledTitle = styled.span<{ color: string }>`
  color: ${({ color }) => color};
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
`;

const StyledLink = styled.span`
  color: var(--contextual-blue, #6396e5);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
`;

export default ReminderTemplate;
