import React from 'react';
import styled from 'styled-components';
import {
  countReducerAtom,
  useAtom,
  useReturnData,
} from '../../../order-view/store';
import { useSelectedOrders } from '../../../store';
// import { StyledBulkItem } from '../../filters/BulkFilterStyle';
// import SearchType from '../../header/route-header/search/SearchType';
// import DownloadIcon from '../../../../assets/icons/DownloadIcon';
import { ExportButton } from '@bjsdistribution/dms-component-library';
import { filtersReducerAtom } from '../../header-filters/filterStore';
// import { FilterIconConatiner } from '../../filters/FilterStyle';

const RightFilters = () => {
  const [, dispatch] = useAtom(countReducerAtom);
  const [selectedReturnOrder] = useSelectedOrders();
  const [returnData] = useReturnData();
  const [state] = useAtom(filtersReducerAtom);

  const { 'x-filters': filters } = state;
  const moduleInfo = {
    isExportedData: returnData?.length <= 0 ? false : true,
    moduleName: 'return',
    filter: filters,
    file_type: 'csv',
    apiUrlEndPoint: `v1/return/product/pending/`,
    reference: 'return_export',
    feature_name: 'return',
  };

  return (
    <Container>
      <ButtonText
        onClick={() => dispatch({ type: 'create-return' })}
        disabled={selectedReturnOrder?.length === 0}
      >
        Create Return
      </ButtonText>
      {/* <StyledBulkItem>
        <SearchType />
      </StyledBulkItem> */}
      {/* <IconConatiner>
        <Mid> */}
      <ExportButton moduleInfoModule={moduleInfo} />
      {/* <DownloadIcon />
        </Mid> */}
      {/* </IconConatiner> */}
    </Container>
  );
};
const Container = styled.div`
  display: flex;
  /* align-items: flex-start; */
  gap: 16px;
  align-items: center;
`;
// const Mid = styled.div`
//   display: flex;
//   padding: 4px 10px;
//   align-items: center;
//   gap: 8px;
//   align-self: stretch;
//   border-radius: 15px 0px 0px 15px;
// `;

const ButtonText = styled.button`
  color: white;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;

  display: flex;
  padding: 7px 12px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: 15px;
  background: #3a3630;
  font-family: 'Lato';
  cursor: pointer;
  border: none;

  &:disabled {
    border-radius: 15px;
    background: rgba(136, 128, 117, 0.35);
    color: #888075;
    cursor: not-allowed;
  }
`;

// const IconConatiner = styled.div`
//   /* display: flex;
//   height: 34px;
//   padding: 4px 10px;
//   align-items: flex-start;
//   border-radius: 8px 8px 8px 8px; */
//   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
//   background: #f0f2f2;
//   border: 1px solid #e2e0db;
//   display: flex;
//   padding: 7px 12px;
//   justify-content: center;
//   align-items: center;
//   gap: 2px;
//   border-radius: 15px;
//   height: 34px;
// `;

// const IconText = styled.div`
//   color: #3a3630;
//   text-align: center;

//   /* body/captions */
//   font-family: 'Lato';
//   font-size: 13px;
//   font-style: normal;
//   font-weight: 400;
//   line-height: 16px;
// `;
export default RightFilters;
