import React from 'react';
import styled from 'styled-components';
import { optionsClientPortPrint, optionsPrint } from '../../common/fakedata';
import { PrintIconMap } from '../utlis';
import { useClientPortal } from '../../../store';

const PrintDropDown = ({
  legacyProductId,
}: {
  legacyProductId: Record<string, any>;
}) => {
  const downloadFiles = (type: string) => {
    let url: string | undefined;

    if (type) {
      url = legacyProductId[type];
    }

    if (url) {
      window.open(url, '_blank');
    } else {
      console.log('URL not available for', type);
    }
  };
  const [clientPortal] = useClientPortal();
  const printOptions = clientPortal ? optionsClientPortPrint : optionsPrint;
  return (
    <OptionsList>
      {printOptions?.map((item: any, index: any) => {
        const IconComponent = PrintIconMap[item.icon];
        const isDisabled = !legacyProductId[item.type];

        return (
          <OptionsListLi
            key={index}
            onClick={() => !isDisabled && downloadFiles(item.type)}
            disabled={isDisabled}
          >
            {IconComponent && <IconComponent />}
            {item.label}
          </OptionsListLi>
        );
      })}
    </OptionsList>
  );
};

export default PrintDropDown;

export const OptionsList = styled.ul`
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid rgba(224, 226, 231, 0.5);
  background: #fff;
  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
  width: 177px;
  padding: 5px 1px 3px 1px;
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 99;
  min-width: 194px;
`;

export const OptionsListLi = styled.li<{ disabled?: boolean }>`
  border-bottom: 1px solid #f0f2f2;
  padding: 8px 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  color: ${({ disabled }) => (disabled ? '#d3d3d3' : 'inherit')};
  &:last-child {
    border: none;
  }
  &:hover {
    background-color: ${({ disabled }) =>
      disabled ? 'transparent' : '#f0f0f0'};
  }
`;
