import React, { useEffect, useState } from "react";
import {
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { liveStockProfile } from "../../services/live-stock-profile";
import { useDispatch } from "react-redux";
import { Box } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";

const LiveStockProfile = () => {
  const [profileInfo, setProfileInfo] = useState();

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(liveStockProfile()).then((r) => {
      setProfileInfo(r.payload.data);
      dispatch(LOADING_END());
    });
  }, []);

  return (
    <Box>
      <Grid container gap={SPACING.LARGE}>
        <Grid container direction="column" xs={12}>
          <Grid
            container
            direction="column"
            justifyContent="space-between"
            gap={SPACING.SMALL}
          >
            <>
              <Grid>
                <SimpleTable
                  name={`اطلاعات پشتیبان امور دام`}
                  columns={[
                    "نام",
                    "نام خانوداگی",
                    "استان",
                    "شهر",
                    "آدرس",
                    "کدپستی",
                  ]}
                  data={[
                    [
                      profileInfo?.user?.firstName,
                      profileInfo?.user?.lastName,
                      profileInfo?.address?.province.name,
                      profileInfo?.address?.city.name,
                      profileInfo?.address?.address,
                      profileInfo?.address?.postalCode,
                    ],
                  ]}
                />
              </Grid>
            </>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};

export default LiveStockProfile;
