import React from 'react';
import styled from 'styled-components';
import { PrintIconMap } from '../../../../order-daily-overview/shared/utlis';
import { PrintData } from '../../../../order-daily-overview/shared/interface';
import { optionsForReturnPrint } from '../../../../order-daily-overview/common/fakedata';

const options: PrintData[] = optionsForReturnPrint;

const PrintDropDownReturn = ({
  legacyURL,
  legacyProductID,
}: {
  legacyProductID: any;
  legacyURL: string;
}) => {
  const downloadFiles = () => {
    if (!legacyURL) return;

    const url = `${legacyURL}${legacyProductID}`;
    window.open(url, '_blank');
    console.log(url, 'urlurl');
  };
  return (
    <OptionsList>
      {options?.map((item, index) => {
        const IconComponent = PrintIconMap[item.icon];
        const isDisabled = !legacyURL || !legacyProductID;

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

export default PrintDropDownReturn;

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: 26px;
  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 ? '#ccc' : 'inherit')};
  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
  background-color: ${({ disabled }) => (disabled ? '#f5f5f5' : 'transparent')};

  &:last-child {
    border: none;
  }
`;
