import React from 'react';
import styled from 'styled-components';
import { useProductDetails } from '../../../../store';

import { Empty, Skeleton } from 'antd';
import { useLoading } from '../../../../../order-daily-overview/store/store';
import {
  EmptyDataContainer,
  StyledTable,
  StyledTableWrapper,
} from './ReminderStyles';

function ProductTable() {
  const [orderProductDetails] = useProductDetails();
  const [loading] = useLoading();

  if (!orderProductDetails) {
    return null;
  }

  return (
    <Container>
      <Title>Products ({orderProductDetails?.length})</Title>
      <StyledTableWrapper>
        <StyledTable className="scrollClass">
          <thead>
            <tr>
              <th>Action</th>
              <th>Code</th>
              <th>Description</th>
              <th>Parts</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr>
                <td colSpan={6}>
                  <Skeleton active />
                </td>
                <td colSpan={6}></td>
              </tr>
            ) : orderProductDetails?.length === 0 ? (
              <tr>
                <td className="emptyTd" colSpan={7}>
                  <EmptyDataContainer>
                    <Empty />
                  </EmptyDataContainer>
                </td>
              </tr>
            ) : (
              orderProductDetails?.map((order: any) => (
                <tr key={order.id}>
                  <td>{order?.order_product_type?.type}</td>{' '}
                  <td>{order?.code}</td>
                  <td>{order?.description}</td>
                  <td>{order?.sku}</td>
                </tr>
              ))
            )}
          </tbody>
        </StyledTable>
      </StyledTableWrapper>
    </Container>
  );
}

const Title = styled.h2`
  color: #3a3630;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
  > div {
    min-height: 165px;
  }
`;

export default ProductTable;
