import { Card, CardContent, Divider, Switch, IconButton } from "@mui/material";
import MDTypography from "../../ui-kit/components/MDTypography";
import MDBox from "../../ui-kit/components/MDBox";
import {
  useMaterialUIController,
  setDarkMode,
  setThemeColor,
} from "../../ui-kit/context";
import palettes from "../../ui-kit/assets/theme/base/palettes";
import { useContext, useEffect, useState } from "react";
import { AxiosResponse } from "axios";
import { axiosInstance } from "../../../axiosApi";
import { PreferencesType } from "../../data";
import { PreferenceContext } from "../../contexts/PreferencesContext";

type PreferencesValues = {
  order: boolean;
}

const ThemeCard = ({ }): JSX.Element => {
  const [controller, dispatch] = useMaterialUIController();
  const {
    darkMode,
    themeColor,
  } = controller;
  const themeColors = Object.keys(palettes);

  const [order, setOrder] = useState<boolean>(true);
  const { updatePreferences } = useContext(PreferenceContext);

  const handleConversationOrder = async ({ order }: PreferencesValues): Promise<void> => {
    try {
      const { data, }: AxiosResponse<PreferencesType> = await axiosInstance.post('/conversation_preferences', {
        order: order
      })
      updatePreferences();
    } catch {

    }


  }

  async function getConversationOrder() {
    try {
      const { data, }: AxiosResponse<PreferencesType> = await axiosInstance.get(`/conversation_preferences`);
      setOrder(data.order);


    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    getConversationOrder();
  }, [])

  const handleDarkMode = () => setDarkMode(dispatch, !darkMode);
  const isThemeReady = true;
  return (
    <Card sx={{ mb: 1 }}>
      <CardContent>
        <MDTypography variant="h3">
          Account Preferences

        </MDTypography>
      </CardContent>
      <Divider />
      <CardContent>
        <MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
          <MDTypography variant="h6">Light / Dark</MDTypography>
          <Switch checked={darkMode} onChange={handleDarkMode} disabled={false} />
        </MDBox>
        <MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1} mt={2}>
          <MDTypography variant="h6">Theme Color</MDTypography>
          <MDBox>
            {themeColors.map((color) => (
              <IconButton
                key={color}
                sx={(theme: any) => {
                  const {
                    borders: { borderWidth },
                    palette: { white, dark, background },
                    transitions,
                  } = theme;

                  return {
                    width: "24px",
                    height: "24px",
                    padding: 0,
                    border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`,
                    borderColor: () => {
                      let borderColorValue = themeColor === color && dark.main;

                      if (darkMode && themeColor === color) {
                        borderColorValue = white.main;
                      }

                      return borderColorValue;
                    },
                    transition: transitions.create("border-color", {
                      easing: transitions.easing.sharp,
                      duration: transitions.duration.shorter,
                    }),
                    backgroundColor: palettes[color as keyof typeof palettes].main,

                    "&:not(:last-child)": {
                      mr: 1,
                    },

                    "&:hover, &:focus, &:active": {
                      borderColor: darkMode ? white.main : dark.main,
                    },
                  };
                }}
                onClick={() => setThemeColor(dispatch, color)}
              />
            ))}
          </MDBox>
        </MDBox>

        <MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
          <MDTypography variant="h6">Converastion Order</MDTypography>
          <Switch checked={order} onChange={() => {
            setOrder(!order);
            handleConversationOrder({ order: !order })
          }} />
        </MDBox>
      </CardContent>
    </Card>
  )
}

export default ThemeCard;
