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

function FlagTemplate({ data, dismissFlags }: any) {
  const [, setSelectedFlag] = useFlagRefId();
  const [, setCurrentAction] = useCurrentAction();

  const openModal = () => {
    setCurrentAction('view-flag');
  };
  const handleClick = (Id: number) => {
    setSelectedFlag(Id);
    openModal();
  };

  const titleColor = data?.status === 'SD' ? '#36A053' : '#3a3630';
  return (
    <StyledAlert>
      <FlagAlert
        type={data?.status === 'AD' ? 'info' : 'success'}
        title={
          <>
            <StyledTitle color={titleColor}>
              Flag : {data?.is_private ? 'Private' : ''}{' '}
              <StyledLink onClick={() => handleClick(data.id)}>
                {data?.id} - {data?.flag_type}{' '}
              </StyledLink>{' '}
              {data?.status === 'AD' ? 'Unresolved' : 'Resolved on'}{' '}
              {data?.status == 'SD' ? (
                <>
                  {formatDate(data?.resolved_at)} by {data?.resolved_by}{' '}
                </>
              ) : null}
            </StyledTitle>
          </>
        }
        subtitle=""
        description={`${data?.description}`}
        showOkButton={false}
        onClose={() => dismissFlags(data?.id)}
      />
    </StyledAlert>
  );
}

const StyledAlert = styled.div`
  margin-bottom: 10px;
`;

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

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

export default FlagTemplate;
