import React from 'react';
import styled from 'styled-components';
import OptionsDropDown from './OptionsDropDown';
import Print from '../../../general-information/dropdowns/Print';
import BjsMenuDropDown from './MenuDropDown';
import { useCurrentAction, useOrderDetails } from '../../../store';
// components

function DropDowns() {
  const [orderDetails] = useOrderDetails();
  const [, setCurrentAction] = useCurrentAction();

  const isEmailId = orderDetails?.order_recipient?.contact_email;
  const isContactNum = orderDetails?.order_recipient?.contact_home;

  const actions = [];

  if (isContactNum) {
    actions?.push({
      label: 'Send SMS',
      onClick: () => setCurrentAction('send-sms'),
    });
  }

  if (isEmailId) {
    actions?.push({
      label: 'Send Email',
      onClick: () => setCurrentAction('send-email'),
    });
  }

  return (
    <>
      <DashBoardWrapper>
        <BjsMenuDropDown />
        <OptionsDropDown />
        <Print />
        {actions?.map((action, index) => (
          <FontContainer
            key={index}
            onClick={action.onClick}
            style={{ cursor: 'pointer' }}
          >
            {action.label}
          </FontContainer>
        ))}
      </DashBoardWrapper>
    </>
  );
}

const DashBoardWrapper = styled.section`
  padding: 0 5px;
  display: flex;
  align-self: center;
  gap: 10px;
  align-items: center;
`;

export const FontContainer: any = styled.div<{ disabled?: boolean }>`
  color: #6a7378;
  text-align: center;
  font-family: 'lato', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
  @media screen and (max-width: 1210px) {
    font-size: 11px;
    line-height: 12px;
  }
`;

export default DropDowns;
