import React, { useContext, useEffect, useState } from 'react';
import { MyContext } from '../../App';
import {
  Card,
  CardContent,
  CardHeader,
  Typography,
  RadioGroup,
  Radio,
  FormControlLabel,
  Button,
  Box,
  ButtonBase,
  Divider,
} from '@mui/material';
import { getNameInfo } from '../Group/Group';
import PollIcon from '@mui/icons-material/Poll';
import { getFee } from '../../background';
import RefreshIcon from '@mui/icons-material/Refresh';
import { Spacer } from '../../common/Spacer';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import { CustomLoader } from '../../common/CustomLoader';

export const PollCard = ({
  poll,
  setInfoSnack,
  setOpenSnack,
  refresh,
  openExternal,
  external,
  isLoadingParent,
  errorMsg,
}) => {
  const [selectedOption, setSelectedOption] = useState('');
  const [ownerName, setOwnerName] = useState('');
  const [showResults, setShowResults] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const { show, userInfo } = useContext(MyContext);
  const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
  const handleVote = async () => {
    const fee = await getFee('VOTE_ON_POLL');

    await show({
      message: `Do you accept this VOTE_ON_POLL transaction? POLLS are public!`,
      publishFee: fee.fee + ' QORT',
    });
    setIsLoadingSubmit(true);

    window
      .sendMessage(
        'voteOnPoll',
        {
          pollName: poll?.info?.pollName,
          optionIndex: +selectedOption,
        },
        60000
      )
      .then((response) => {
        setIsLoadingSubmit(false);
        if (response.error) {
          setInfoSnack({
            type: 'error',
            message: response?.error || 'Unable to vote.',
          });
          setOpenSnack(true);
          return;
        } else {
          setInfoSnack({
            type: 'success',
            message:
              'Successfully voted. Please wait a couple minutes for the network to propogate the changes.',
          });
          setOpenSnack(true);
        }
      })
      .catch((error) => {
        setIsLoadingSubmit(false);
        setInfoSnack({
          type: 'error',
          message: error?.message || 'Unable to vote.',
        });
        setOpenSnack(true);
      });
  };

  const getName = async (owner) => {
    try {
      const res = await getNameInfo(owner);
      if (res) {
        setOwnerName(res);
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    if (poll?.info?.owner) {
      getName(poll.info.owner);
    }
  }, [poll?.info?.owner]);

  return (
    <Card
      sx={{
        backgroundColor: '#1F2023',
        height: isOpen ? 'auto' : '150px',
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '16px 16px 0px 16px',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: '10px',
          }}
        >
          <PollIcon
            sx={{
              color: 'white',
            }}
          />
          <Typography>POLL embed</Typography>
        </Box>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: '10px',
          }}
        >
          <ButtonBase>
            <RefreshIcon
              onClick={refresh}
              sx={{
                fontSize: '24px',
                color: 'white',
              }}
            />
          </ButtonBase>
          {external && (
            <ButtonBase>
              <OpenInNewIcon
                onClick={openExternal}
                sx={{
                  fontSize: '24px',
                  color: 'white',
                }}
              />
            </ButtonBase>
          )}
        </Box>
      </Box>
      <Box
        sx={{
          padding: '8px 16px 8px 16px',
        }}
      >
        <Typography
          sx={{
            fontSize: '12px',
          }}
        >
          Created by {ownerName || poll?.info?.owner}
        </Typography>
      </Box>
      <Divider sx={{ borderColor: 'rgb(255 255 255 / 10%)' }} />
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          alignItems: 'center',
        }}
      >
        {!isOpen && !errorMsg && (
          <>
            <Spacer height="5px" />
            <Button
              size="small"
              variant="contained"
              sx={{
                backgroundColor: 'var(--green)',
              }}
              onClick={() => {
                setIsOpen(true);
              }}
            >
              Show poll
            </Button>
          </>
        )}
        {isLoadingParent && isOpen && (
          <Box
            sx={{
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            {' '}
            <CustomLoader />{' '}
          </Box>
        )}
        {errorMsg && (
          <Box
            sx={{
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            {' '}
            <Typography
              sx={{
                fontSize: '14px',
                color: 'var(--danger)',
              }}
            >
              {errorMsg}
            </Typography>{' '}
          </Box>
        )}
      </Box>

      <Box
        sx={{
          display: isOpen ? 'block' : 'none',
        }}
      >
        <CardHeader
          title={poll?.info?.pollName}
          subheader={poll?.info?.description}
          sx={{
            '& .MuiCardHeader-title': {
              fontSize: '18px', // Custom font size for title
            },
          }}
        />
        <CardContent>
          <Typography
            sx={{
              fontSize: '18px',
            }}
          >
            Options
          </Typography>
          <RadioGroup
            value={selectedOption}
            onChange={(e) => setSelectedOption(e.target.value)}
          >
            {poll?.info?.pollOptions?.map((option, index) => (
              <FormControlLabel
                key={index}
                value={index}
                control={
                  <Radio
                    sx={{
                      color: 'white', // Unchecked color
                      '&.Mui-checked': {
                        color: 'var(--green)', // Checked color
                      },
                    }}
                  />
                }
                label={option?.optionName}
                sx={{
                  '& .MuiFormControlLabel-label': {
                    fontSize: '14px',
                  },
                }}
              />
            ))}
          </RadioGroup>
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: '20px',
            }}
          >
            <Button
              variant="contained"
              color="primary"
              disabled={!selectedOption || isLoadingSubmit}
              onClick={handleVote}
            >
              Vote
            </Button>
            <Typography
              sx={{
                fontSize: '14px',
                fontStyle: 'italic',
              }}
            >
              {' '}
              {`${poll?.votes?.totalVotes} ${
                poll?.votes?.totalVotes === 1 ? ' vote' : ' votes'
              }`}
            </Typography>
          </Box>

          <Spacer height="10px" />
          <Typography
            sx={{
              fontSize: '14px',
              visibility: poll?.votes?.votes?.find(
                (item) => item?.voterPublicKey === userInfo?.publicKey
              )
                ? 'visible'
                : 'hidden',
            }}
          >
            You've already voted.
          </Typography>
          <Spacer height="10px" />
          {isLoadingSubmit && (
            <Typography
              sx={{
                fontSize: '12px',
              }}
            >
              Is processing transaction, please wait...
            </Typography>
          )}
          <ButtonBase
            onClick={() => {
              setShowResults((prev) => !prev);
            }}
          >
            {showResults ? 'hide ' : 'show '} results
          </ButtonBase>
        </CardContent>
        {showResults && <PollResults votes={poll?.votes} />}
      </Box>
    </Card>
  );
};

const PollResults = ({ votes }) => {
  const maxVotes = Math.max(
    ...votes?.voteCounts?.map((option) => option.voteCount)
  );
  const options = votes?.voteCounts;
  return (
    <Box sx={{ width: '100%', p: 2 }}>
      {options
        .sort((a, b) => b.voteCount - a.voteCount) // Sort options by votes (highest first)
        .map((option, index) => (
          <Box key={index} sx={{ mb: 2 }}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Typography
                variant="body1"
                sx={{
                  fontWeight: index === 0 ? 'bold' : 'normal',
                  fontSize: '14px',
                }}
              >
                {`${index + 1}. ${option.optionName}`}
              </Typography>
              <Typography
                variant="body1"
                sx={{
                  fontWeight: index === 0 ? 'bold' : 'normal',
                  fontSize: '14px',
                }}
              >
                {option.voteCount} votes
              </Typography>
            </Box>
            <Box
              sx={{
                mt: 1,
                height: 10,
                backgroundColor: '#e0e0e0',
                borderRadius: 5,
                overflow: 'hidden',
              }}
            >
              <Box
                sx={{
                  width: `${(option.voteCount / maxVotes) * 100}%`,
                  height: '100%',
                  backgroundColor: index === 0 ? '#3f51b5' : '#f50057',
                  transition: 'width 0.3s ease-in-out',
                }}
              />
            </Box>
          </Box>
        ))}
    </Box>
  );
};
