import React, { useState } from 'react';
import { Box, Dialog, IconButton, MainButton, ModalHeader, Text } from '@nova-hf/ui';

type YfirlitHeaderProps = {
  phoneNumber: string;
  onEditClick: () => void;
  onTrashClick: () => void;
};

export const YfirlitHeader = ({ phoneNumber, onEditClick, onTrashClick }: YfirlitHeaderProps) => {
  const [showModal, setShowModal] = useState(false);
  return (
    <>
      <Box display="flex" width="100%" alignItems="center" justifyContent="space-between">
        <Text marginLeft={{ lg: 2 }} color="black100" variant="subHeading">
          {phoneNumber}
        </Text>
        <Box marginLeft={2} display="block">
          <Box display="flex" flexDirection="row" alignItems="flex-start" gap={1}>
            <IconButton
              hiddenButtonText="Edit information"
              icon="edit"
              size={24}
              color="grey700"
              onClick={() => onEditClick()}
            />
            <IconButton
              hiddenButtonText="Delete from cart"
              icon="trash"
              color="warning"
              viewBox={24}
              onClick={() => setShowModal(true)}
            />
          </Box>
        </Box>
      </Box>
      <Dialog
        ariaLabel={'Staðfestingargluggi, eyða úr körfu'}
        onVisibilityChange={(isVisible: boolean) => setShowModal(isVisible)}
        isVisible={showModal}
        width={['11/12', '10/12', '6/12']}
        borderRadius="16px"
      >
        <Box display="flex" flexDirection="column" width="100%">
          <ModalHeader title={'Ertu viss?'} />
          <Box marginY={5} flexGrow={1}>
            Ertu viss um að þú viljir eyða vörunni úr körfu?
          </Box>
          <Box display="flex" flexDirection={['column', 'row', 'row']} gap={{ sm: 2, md: 4 }}>
            <MainButton
              text={'Hætta við'}
              colorScheme="white"
              onClick={() => setShowModal(false)}
              dottedShadow="none"
              fullWidth
            />
            <MainButton
              text={'Já, eyða'}
              colorScheme={'pink'}
              onClick={() => {
                setShowModal(false);
                onTrashClick();
              }}
              dottedShadow="none"
              fullWidth
            />
          </Box>
        </Box>
      </Dialog>
    </>
  );
};