import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Stack, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Chip } from '@mui/material';
import MainCard from 'components/MainCard';
import Loader from 'components/Loader';
import TitleCard from 'components/nearle_components/TitleCard';
import LocationAutocomplete from 'components/nearle_components/LocationAutocomplete';
import { Empty } from 'antd';
import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';

// ==============================|| Starts here ||============================== //
const ClientsPricing = () => {
  const [appId, setAppId] = useState(0);
  const [locaName, setLocoName] = useState('');
  const [pricing, setpricing] = useState([]);
  const [isLoader, setIsloader] = useState([]);

  // ==============================|| formatNumberToRupees ||============================== //
  function formatNumberToRupees(value) {
    return new Intl.NumberFormat('en-IN', {
      style: 'currency',
      currency: 'INR',
      minimumFractionDigits: 2
    }).format(value);
  }
  function dotzerozero(value) {
    return new Intl.NumberFormat('en-IN', {
      minimumFractionDigits: 2
    }).format(value);
  }

  // ==============================|| getAllPricing ||============================== //
  const getAllPricing = async () => {
    setIsloader(true);
    try {
      const pricingres = await axios.get(`${process.env.REACT_APP_URL}/utils/getallpricing/?applocationid=${appId}`);
      console.log('pricingres', pricingres.data.details);
      setpricing(pricingres.data.details);
      setIsloader(false);
    } catch (err) {
      console.log('pricingres', err);
    }
  };
  useEffect(() => {
    getAllPricing();
  }, [appId]);

  return (
    <>
      {isLoader && <Loader />}
      {/* ============================================= || Title Card || =============================================  */}
      <Stack direction={'row'} justifyContent="space-between" alignItems="center" sx={{ my: 1 }}>
        <TitleCard title="Pricing" />
        <Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
          <LocationAutocomplete
            locaName={locaName}
            setAppId={setAppId}
            setLocoName={setLocoName}
            sx={{ width: { xs: '100%', custom450: 300 }, zIndex: '100' }}
          />
        </Stack>
      </Stack>
      {/* ============================================= || table  || =============================================  */}
      <MainCard content={false} sx={{ mt: 2 }}>
        <TableContainer>
          <Table>
            <TableHead sx={{ bgcolor: '#e1bee7' }}>
              <TableRow>
                <TableCell>S.No</TableCell>
                <TableCell>Location</TableCell>
                <TableCell align="center">Pricing Id</TableCell>
                <TableCell>Name</TableCell>
                <TableCell>Slab</TableCell>
                <TableCell align="center">Base Price</TableCell>
                <TableCell align="center">MinKm</TableCell>
                <TableCell align="center">Price/Km</TableCell>
                <TableCell align="center">MaxKm</TableCell>
                <TableCell>Min Orders</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {isLoader && <OrdersTableSkeleton col={5} />}
              {pricing?.length === 0 && !isLoader ? (
                <TableRow>
                  <TableCell colSpan={10} align="center">
                    <Empty description={'No Pricing List'} />
                  </TableCell>
                </TableRow>
              ) : (
                pricing?.map((data, index) => (
                  <TableRow key={data.pricingid || index}>
                    <TableCell>{index + 1}</TableCell>

                    <TableCell>{data.applocation}</TableCell>

                    <TableCell align="center">
                      <Chip size="small" color="info" label={data.pricingid} sx={{ width: 50 }} />
                    </TableCell>

                    <TableCell sx={{ whiteSpace: 'nowrap' }}>{data.appname}</TableCell>

                    <TableCell>{data.slab}</TableCell>

                    <TableCell align="center">
                      <Chip size="small" color="primary" label={formatNumberToRupees(data.baseprice)} sx={{ width: 100 }} />
                    </TableCell>

                    <TableCell align="center">
                      <Chip size="small" color="warning" label={dotzerozero(data.minkm)} sx={{ width: 100 }} />
                    </TableCell>

                    <TableCell align="center">
                      <Chip size="small" color="success" label={formatNumberToRupees(data.priceperkm)} sx={{ width: 100 }} />
                    </TableCell>

                    <TableCell align="center">
                      <Chip size="small" color="error" label={dotzerozero(data.maxkm)} sx={{ width: 100 }} />
                    </TableCell>

                    <TableCell>{data.minorder}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </TableContainer>
      </MainCard>
    </>
  );
};

export default ClientsPricing;
