import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material';
import { useMemo } from 'react';
import { createTheme } from '../../themes/createTheme.js';
import type { WidgetConfigPartialProps } from '../../types/widget.js';
import {
  AppExpandedContainer,
  FlexContainer,
  RelativeContainer,
} from '../AppContainer.js';
import {
  SkeletonAmountContainer,
  SkeletonCard,
  SkeletonCardRow,
  SkeletonHeaderAppBar,
  SkeletonHeaderContainer,
  SkeletonInputCard,
  SkeletonPoweredByContainer,
  SkeletonReviewButton,
  SkeletonReviewButtonContainer,
  // SkeletonSendToWalletButton,
  // SkeletonWalletMenuButtonContainer,
} from './WidgetSkeleton.style.js';

const SkeletonIcon = () => (
  <Skeleton width={24} height={24} variant="rounded" />
);
// const SkeletonWalletMenuButton = () => (
//   <SkeletonWalletMenuButtonContainer>
//     <Skeleton width={98} height={19} variant="text" />
//     <SkeletonIcon />
//   </SkeletonWalletMenuButtonContainer>
// );

interface SkeletonSelectCardProps {
  titleWidth?: number;
  placeholderWidth?: number;
}
const SkeletonSelectCard = ({
  titleWidth = 36,
  placeholderWidth = 195,
}: SkeletonSelectCardProps) => (
  <SkeletonCard elevation={0}>
    <Skeleton width={titleWidth} height={22} variant="text" />

    {/* <SkeletonCardRow>
      <Skeleton width={40} height={40} variant="circular" />
      <Skeleton width={placeholderWidth} height={27} variant="text" />
    </SkeletonCardRow> */}

    <SkeletonHeaderAppBar sx={{ justifyContent: 'space-between', height: 40 }}>
      <SkeletonAmountContainer>
        <Skeleton width={placeholderWidth} height={27} variant="text" />
        <Skeleton width={placeholderWidth} height={17} variant="text" />
      </SkeletonAmountContainer>

      <SkeletonAmountContainer>
        <Skeleton
          width={48}
          height={37}
          variant="text"
          sx={{ marginTop: -0.75 }}
        />
      </SkeletonAmountContainer>
    </SkeletonHeaderAppBar>
  </SkeletonCard>
);

const SkeletonYouPayCard = () => (
  <SkeletonInputCard elevation={0}>
    <Skeleton width={55} height={22} variant="text" />
    <SkeletonCardRow>
      <Skeleton width={40} height={40} variant="circular" />
      <Skeleton width={195} height={27} variant="text" />
      {/* <SkeletonAmountContainer>
        <Skeleton
          width={48}
          height={37}
          variant="text"
          sx={{ marginTop: -0.75 }}
        />
        <Skeleton width={48} height={12} variant="text" />
      </SkeletonAmountContainer> */}
    </SkeletonCardRow>
  </SkeletonInputCard>
);

export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
  const appearance = config?.appearance;
  const hiddenUI = config?.hiddenUI || [];
  const requiredUI = config?.requiredUI || [];
  const configTheme = config?.theme;
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const appearanceMode =
    !appearance || appearance === 'auto'
      ? prefersDarkMode
        ? 'dark'
        : 'light'
      : appearance;

  const theme = useMemo(
    () => createTheme(appearanceMode, configTheme),
    [appearanceMode, configTheme],
  );

  return (
    <ThemeProvider theme={theme}>
      <AppExpandedContainer>
        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
          <SkeletonHeaderContainer>
            {/* {!hiddenUI.includes('walletMenu') ? (
              <SkeletonHeaderAppBar>
                <SkeletonWalletMenuButton />
              </SkeletonHeaderAppBar>
            ) : null} */}

            <SkeletonHeaderAppBar
              sx={{ justifyContent: 'space-between', height: 40 }}
            >
              <Skeleton width={126} height={34} variant="text" />
              <SkeletonIcon />
            </SkeletonHeaderAppBar>
          </SkeletonHeaderContainer>

          <FlexContainer
            sx={{
              gap: 2,
              paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,
            }}
          >
            <SkeletonSelectCard />
            <SkeletonSelectCard />
            <SkeletonYouPayCard />

            {requiredUI.includes('toAddress') ? (
              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />
            ) : null}

            <SkeletonReviewButtonContainer>
              <SkeletonReviewButton variant="contained" fullWidth>
                &nbsp;
              </SkeletonReviewButton>

              {/* {!requiredUI.includes('toAddress') ? (
                <SkeletonSendToWalletButton variant="text" fullWidth>
                  &nbsp;
                </SkeletonSendToWalletButton>
              ) : null} */}
            </SkeletonReviewButtonContainer>
          </FlexContainer>

          {!hiddenUI.includes('poweredBy') ? (
            <SkeletonPoweredByContainer>
              <Skeleton width={96} height={18} variant="text" />
            </SkeletonPoweredByContainer>
          ) : null}
        </RelativeContainer>
      </AppExpandedContainer>
    </ThemeProvider>
  );
};