import React, { useMemo } from 'react';

import { Image } from '../Image/Image';
import { Button } from '../Button/Button';
import { ButtonProps } from '../Button/types';
import useTheme from '../../context/theme/useTheme';
import { Box } from '../Box';

export type SocialButtonProvider = 'google' | 'facebook' | 'apple' | 'twitter';

export interface SocialButtonProps extends Omit<ButtonProps, 'children'> {
  provider?: SocialButtonProvider;
  text?: string;
  iconSize?: number;
}

const SwitchProvidersTextMap: Record<SocialButtonProvider, string> = {
  google: 'Continue with Google',
  facebook: 'Continue with Facebook',
  apple: 'Continue with Apple',
  twitter: 'Continue with Twitter',
} as const;

const SwitchProvidersImageMap: Record<
  SocialButtonProvider,
  { light: string; dark: string }
> = {
  google: {
    light: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAdVBMVEVHcEzxaSbqQzQ0qFM4n4HqQzU0qFRChfRChPRChfQzqFPuXS3uYivqQzXrQzU0qFXrQzU0qFM0qFP6uAf6uwb7ugXqQzX8vAVChfVDhPQ5m5DsUy/0hhpChfQ/jdBWrEaPsS/uuwrLtxjqQzU0qFP7vAVChfSSyhVQAAAAI3RSTlMADtfsE+7R7VXGOCE6l1CLuK9k2prycWKaNcPHx3PV4srCxi89pYIAAAPzSURBVGje7ZjrdqowEIXDJUGQu8qxta1agu//iAdR8UJCJmQia5119u+Wz9kzSXZCiLacuKqS3HUprWtK3V2eJ1W6JHYVV7lbi+UmtujLKqf1uFq4g07d1SDRJEXEpnmtIZrgeO5Ubq2rJEbA0nqKckP0RGyHNjA8dmsD0WTiiDt5bSg6acJTWptLv2jzcq97SvzO7j6pervNvd1wblKjaue8t70PjQaRnR02t07/cwVcFxsL3L3yeerFXketYBtXhe4zjJtqfpVSisJdQvdJmidpfDvml2mVuEZc4GC5ojzlpILoC+WCGixPcYNMCOUuzXNrupvAJeodCxCX075qCo16SqNhUcJJNLmOaqITrQwB5qq2LJ24uHRrF8xVTJarlc0djbvT2sWILhMuoc1mZKhza1yybprmi769XuJsWnCzcg2C2jT9aToJ7aY2n1VWzVUCu1OL3LjpNbA7scjtRuumF7ttNvg6Wr2+9BOT2WjdyXe7c/Iup1/stvtQuGoG+nrDZLXbpUCXdWW1w4MW3+222+Fhi3u7U/LuFl/JjlWuI+M2a/U/h8FUPe2XL/oDAJ+mypfM1lmOTfCHdLaaFbEJXsjBa6vgb3I0aLEBeCtfTXbBoRwcWwZvZODlXGDHKjgg0mVM/lXwTFaf5hqu01zLKZhrAwnm2jKDuQ6JcK5jMZwrCGznij7fhmHPACxfT0e7mUs6Xb+8VII/FgoF8pQpu8IcOC+MQ7svX8aSS9txz1tFpuCFfDWJ7zC/vJNxyVv5ahJezA/8Kt+S022sFtxTV/sb17TkxcgN5qyNyOaLzLocjrb45bnp8MjlzE7B2+ED254/K7NR8KXFj3P9yweabvb3aWwVPz2iHoZc7k2dbD9QOd0/G++5SMzHNrp3+jJeR49zRPL2pHa62zYPXKoCtcEPTp9L3vMRFT7eSrocifdJ4KPSdfv7BCyYkGyc7EVI/X0puC3ZGydr7CQfoSJfPqtUgDkDFl3+nDQKbsVUZJ4BOh0x7n3qFKycr67TKnRUdH/3GWgUDDC7q1puuF/2prEf2EiDze4+KmT7ZfHkjcTuQGiZcrL7zxZZGd0+4UdRVgx/s9juhaRFXEeex5gn/60iu7fSpcARNbQ7kM9mhknmn+qJ7lWgklkAaPB1VBgq2fsBNNgK+W73VpmVkMlXu0NASkMmd3aHoBMdd8LOdofAJJEhk+GHeenNw+3OVbQel3oXAaxGM+1LUIRidzbhOoBQtDfxzmfa6Wz6W4bJeBdm7wlT0cz4sYqU7O3VvsRW8EhlPsGSDy7byyKCqzbBKtvN0Kk3z8uCyTNv5BOb8qMya5N0F23PEZcV2UPMhuovXZUHK3JyRmoAAAAASUVORK5CYII=',
    dark: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAdVBMVEVHcEzxaSbqQzQ0qFM4n4HqQzU0qFRChfRChPRChfQzqFPuXS3uYivqQzXrQzU0qFXrQzU0qFM0qFP6uAf6uwb7ugXqQzX8vAVChfVDhPQ5m5DsUy/0hhpChfQ/jdBWrEaPsS/uuwrLtxjqQzU0qFP7vAVChfSSyhVQAAAAI3RSTlMADtfsE+7R7VXGOCE6l1CLuK9k2prycWKaNcPHx3PV4srCxi89pYIAAAPzSURBVGje7ZjrdqowEIXDJUGQu8qxta1agu//iAdR8UJCJmQia5119u+Wz9kzSXZCiLacuKqS3HUprWtK3V2eJ1W6JHYVV7lbi+UmtujLKqf1uFq4g07d1SDRJEXEpnmtIZrgeO5Ubq2rJEbA0nqKckP0RGyHNjA8dmsD0WTiiDt5bSg6acJTWptLv2jzcq97SvzO7j6pervNvd1wblKjaue8t70PjQaRnR02t07/cwVcFxsL3L3yeerFXketYBtXhe4zjJtqfpVSisJdQvdJmidpfDvml2mVuEZc4GC5ojzlpILoC+WCGixPcYNMCOUuzXNrupvAJeodCxCX075qCo16SqNhUcJJNLmOaqITrQwB5qq2LJ24uHRrF8xVTJarlc0djbvT2sWILhMuoc1mZKhza1yybprmi769XuJsWnCzcg2C2jT9aToJ7aY2n1VWzVUCu1OL3LjpNbA7scjtRuumF7ttNvg6Wr2+9BOT2WjdyXe7c/Iup1/stvtQuGoG+nrDZLXbpUCXdWW1w4MW3+222+Fhi3u7U/LuFl/JjlWuI+M2a/U/h8FUPe2XL/oDAJ+mypfM1lmOTfCHdLaaFbEJXsjBa6vgb3I0aLEBeCtfTXbBoRwcWwZvZODlXGDHKjgg0mVM/lXwTFaf5hqu01zLKZhrAwnm2jKDuQ6JcK5jMZwrCGznij7fhmHPACxfT0e7mUs6Xb+8VII/FgoF8pQpu8IcOC+MQ7svX8aSS9txz1tFpuCFfDWJ7zC/vJNxyVv5ahJezA/8Kt+S022sFtxTV/sb17TkxcgN5qyNyOaLzLocjrb45bnp8MjlzE7B2+ED254/K7NR8KXFj3P9yweabvb3aWwVPz2iHoZc7k2dbD9QOd0/G++5SMzHNrp3+jJeR49zRPL2pHa62zYPXKoCtcEPTp9L3vMRFT7eSrocifdJ4KPSdfv7BCyYkGyc7EVI/X0puC3ZGydr7CQfoSJfPqtUgDkDFl3+nDQKbsVUZJ4BOh0x7n3qFKycr67TKnRUdH/3GWgUDDC7q1puuF/2prEf2EiDze4+KmT7ZfHkjcTuQGiZcrL7zxZZGd0+4UdRVgx/s9juhaRFXEeex5gn/60iu7fSpcARNbQ7kM9mhknmn+qJ7lWgklkAaPB1VBgq2fsBNNgK+W73VpmVkMlXu0NASkMmd3aHoBMdd8LOdofAJJEhk+GHeenNw+3OVbQel3oXAaxGM+1LUIRidzbhOoBQtDfxzmfa6Wz6W4bJeBdm7wlT0cz4sYqU7O3VvsRW8EhlPsGSDy7byyKCqzbBKtvN0Kk3z8uCyTNv5BOb8qMya5N0F23PEZcV2UPMhuovXZUHK3JyRmoAAAAASUVORK5CYII=',
  },
  facebook: {
    light: 'data:image/png;base64,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',
    dark: 'data:image/png;base64,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',
  },
  twitter: {
    light: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAIVBMVEVHcEwdnPAdm/Adm/Edm/Adm/Adm/Adm/Acm/Edm/Adm/DIsAWtAAAACnRSTlMAF4Wjw/HdSS9kxwcqTQAABDtJREFUaN7FWs1PE0EU37WFFk7b+gWeajAQPAERRU8oqcGeQA7insQQIT2t8SPCqQjGwIlYTQgnabfVzl9pu9v97OzMe28m8R3IZpn8+ubN7/3e25kxjP9o5o8H73bXLnRAfa0zz7YcZaiPLLDOXW1QfbBKYuorSKjrLG7d+DQ/vcFBFeoJLNaK/0oFh3XJUvY0+E/ZZo3g+QACdS0NxbpWCOWGw6oNANaTESy2H0CxXjCqyFYpbg0d+zB42oiGteRY9zlY/YgVZr2H82DYOGNSGhd4UMxt2j7ZwnFnjG3KsG4xkfXi7rsyrJoQazUxbkEMNSGEithlJL3k2k0hVCsVVgdLLu4Uff+3RVBFIZTP/9LgT85fVkuAlRNieW6UPefy/psdAdYdIdYgPMd+kMaTmQomfWCv+lL4k7W9gWNM6pgtgOo4xvRywPbJICEsXAIFYnE6G2VkGIwdUuirviNhOg4jliVjY0xqm+lFyuLYoRzLSfk1CCN+GT1rj5KnRRGJgQUlbTL2bgFNCX9CDU5kueEvSt3ajkl0ZK+x9ErKfT7xehFWgjL0K5fdJgCxKln627ZwipNY/XQ49tJYebBbvt7HbT2FNQ52i0PFRRRWRZgiqQYyD0rFdELywTBYvDmsELG4/HlBw+LnW9TC5xBYGZrSfQTjvSPuaoNqcgFpTBwggdz5I6nmOPCOaHdpHoNl1JmCpeTzTCNWTgUrpVFmXR+W0iTRMizoCuM4TUvakIos0c5fvrRUop/EYlsNSJ2XtBJBF+PO0R1rjaxhd80mYvXgTbLU/sSxJtWwrhAlS2a/tSVj1Mapcn6k/SuoYVVwLaRyGaJJ4aUKVAfzRYdJbXmvBk9HaS1FpJBiSbtCf+8AaS/dfUDQXjGLzg19AbMIH5uQiqbIsNEvTtPWRS+VSW4QPuvkW0zQTSkEJRRE3zK0OeYStrhARVtRXa8y9vFqGjI75AWBsA7s3IBQOOJWritnYyxmSGb85W8Szx2Vpg6WNWQQtRad88+2NNRspaaiZeij/SZ9r1LSeqmpYdbmLiH4beJ2P5yptEZgAXUwRQsXoREQJfahJnZRJlmhn03JuxL4mRmgk4groa2uXaF9w+iNZWhzTHr8iYiY9EDbhCel/Lh4wtY1xUGJ1LOKvh3DVhFyIg4s3j3o1Y1mVUG60I2dC4cyawpyk7Ib5LZrNJXqmiLft19KKohrD9vkayVEzntrKP34dvUFK7qygrnOk+GWBYQ6YdrcknsFjVZxVqkhidtpTZOeGtMPFbrwocB/KRnm1PeZKkya94UxQjUREj6UMViypP4Mh9rTV1/bOoRh2HBB1BRWrDswBQTV10VgHgLA1sGqdaIPSuoZ7iqiqI3oYi9MFjJ5RrjIaTa53Og8tgyCFTi685Z8u/T2vYRv3WfvlS7OHsw89/C6u0sXlqFuZulIBwzd/gHRxva5VkXhNgAAAABJRU5ErkJggg==',
    dark: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAIVBMVEVHcEwdnPAdm/Adm/Edm/Adm/Adm/Adm/Acm/Edm/Adm/DIsAWtAAAACnRSTlMAF4Wjw/HdSS9kxwcqTQAABDtJREFUaN7FWs1PE0EU37WFFk7b+gWeajAQPAERRU8oqcGeQA7insQQIT2t8SPCqQjGwIlYTQgnabfVzl9pu9v97OzMe28m8R3IZpn8+ubN7/3e25kxjP9o5o8H73bXLnRAfa0zz7YcZaiPLLDOXW1QfbBKYuorSKjrLG7d+DQ/vcFBFeoJLNaK/0oFh3XJUvY0+E/ZZo3g+QACdS0NxbpWCOWGw6oNANaTESy2H0CxXjCqyFYpbg0d+zB42oiGteRY9zlY/YgVZr2H82DYOGNSGhd4UMxt2j7ZwnFnjG3KsG4xkfXi7rsyrJoQazUxbkEMNSGEithlJL3k2k0hVCsVVgdLLu4Uff+3RVBFIZTP/9LgT85fVkuAlRNieW6UPefy/psdAdYdIdYgPMd+kMaTmQomfWCv+lL4k7W9gWNM6pgtgOo4xvRywPbJICEsXAIFYnE6G2VkGIwdUuirviNhOg4jliVjY0xqm+lFyuLYoRzLSfk1CCN+GT1rj5KnRRGJgQUlbTL2bgFNCX9CDU5kueEvSt3ajkl0ZK+x9ErKfT7xehFWgjL0K5fdJgCxKln627ZwipNY/XQ49tJYebBbvt7HbT2FNQ52i0PFRRRWRZgiqQYyD0rFdELywTBYvDmsELG4/HlBw+LnW9TC5xBYGZrSfQTjvSPuaoNqcgFpTBwggdz5I6nmOPCOaHdpHoNl1JmCpeTzTCNWTgUrpVFmXR+W0iTRMizoCuM4TUvakIos0c5fvrRUop/EYlsNSJ2XtBJBF+PO0R1rjaxhd80mYvXgTbLU/sSxJtWwrhAlS2a/tSVj1Mapcn6k/SuoYVVwLaRyGaJJ4aUKVAfzRYdJbXmvBk9HaS1FpJBiSbtCf+8AaS/dfUDQXjGLzg19AbMIH5uQiqbIsNEvTtPWRS+VSW4QPuvkW0zQTSkEJRRE3zK0OeYStrhARVtRXa8y9vFqGjI75AWBsA7s3IBQOOJWritnYyxmSGb85W8Szx2Vpg6WNWQQtRad88+2NNRspaaiZeij/SZ9r1LSeqmpYdbmLiH4beJ2P5yptEZgAXUwRQsXoREQJfahJnZRJlmhn03JuxL4mRmgk4groa2uXaF9w+iNZWhzTHr8iYiY9EDbhCel/Lh4wtY1xUGJ1LOKvh3DVhFyIg4s3j3o1Y1mVUG60I2dC4cyawpyk7Ib5LZrNJXqmiLft19KKohrD9vkayVEzntrKP34dvUFK7qygrnOk+GWBYQ6YdrcknsFjVZxVqkhidtpTZOeGtMPFbrwocB/KRnm1PeZKkya94UxQjUREj6UMViypP4Mh9rTV1/bOoRh2HBB1BRWrDswBQTV10VgHgLA1sGqdaIPSuoZ7iqiqI3oYi9MFjJ5RrjIaTa53Og8tgyCFTi685Z8u/T2vYRv3WfvlS7OHsw89/C6u0sXlqFuZulIBwzd/gHRxva5VkXhNgAAAABJRU5ErkJggg==',
  },
  apple: {
    light: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAJFBMVEVHcEz///////////////////////////////////////////8Uel1nAAAAC3RSTlMAxPLgpFKIbzkmEtAwqK0AAAOTSURBVGjezVo7bxNBED4DTmzTOEpQIG7CKyDcBERDrnGUoIDSmPAQj8YQiYfcWAgikBsjEEFKY1FAQWNAEQUNvnMckvlz2LHvYWf3bnf2U8iUd9pPs7Mz38zsrGXpSvrVeNbCyBebaBoDdYs68gcCdZtgWO/2oCB7HOlB0aw5VDrXxwKc40ofigrGUKMeFFWMsco+Vg1leCLHWK2qj9U0hUr5ULRtivUjwNo1xcoFWAWYQ5gfY2iLxqZfDrC2TEMxtEXTaDwGNNfvAKqNc3pz8rKDYKwdogAKOIJKplgJH6plzDfHCUfP32AOYVmPvEMsmmN57nUKkGT7aeOCBcM614BhzUCguvZyrqMKuKev69ahkMynu/eFqmyuLY4tPnugjrQ5n+9ae+Lh8I+vC31PO/1WkdxX/fCbHNAt/ThE1VdViCwZSqvUDEXNr/APIjc+oJL2wArnuffjQ55IDyxlD62gycbQxgOlo7eZKe9f0rXzeo4EEk1B70VLyLVJLFHEMZonLYnKSsukKeeVUr2iFGFqEf3FqUVOPa6C15A5scdzoCTZ9zMQK8eBEqfMEZZaU9GJ3nyHvC2W4uo1Y7USHKxCdC0DUItlrrn4zsI0FjlxLaupjzCwshbO9DUcDbbiuxRl2YnvUkwddaCfNjUXwyVcmbmO6mO1FRpX02zGca9phSbY1Os5qbEEzP5FC8deNWAINQ4CK6+PJa3iGAR9EFgZ+q97lNuegVUHnmMRiFUB+moBGI9ZIE/sAvlrC8irLSDfS52VU0RXYm/x1GUWl2ulxudU0S6wNpEZjNXv7eDIUDphsDlgJVhASk+yysGSXHWwuke6CHNWmWK8Dll8B8O7UJAcZZ6H1ayjnEJy4V1lYtHJyOmbptyANKOyiifJxmqBolvSgJS5WALe3yCcuya4WHVcFDVh1CohxCrM9FwKE2c2HoU5whIlwzLYNjB/XMIVKMhCwAVW09KqlRGSWYXZs3HXre8V7fghr+lNJov0I0ZXupuMHMNvwLaoXQPXVN/h8C9r+/IT4qj6F5pO3MS7DIhFRmqLfeOh7mIKbzyUR05TCo9eFKtNV+WtwYoa1jWVWbmAqs9e2a+W2muDIcUm3nR2k1lfGPyq+F4kHT7Kpj/5/2jrHWJPvgdrZurC6b5TUX6o8NJbc2JQ4Sfe95sazyd6E3v3xfD3O3sO42hAdeTe+JnLS4KjSq3Njy2Jaesfia6Dcz0Fs/YAAAAASUVORK5CYII=',
    dark: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAJFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGK9LJAAAAC3RSTlMAxPLgpFKIbzkmEtAwqK0AAAORSURBVGjezZq5bxNBFIfXgBPbNI4SFIibcAWEG4NoyDaOEhRQGhMOcTSGSBxyYyGIQG6MQAQpjUUBBY0BRRQ0eNdJSN4/hx17DzszuzNvfgp55a7m05s375rDsnQl/Wo8a2Hki000jUHdoo78gaBuE4z1bg8FmeNID0UFc1Q612cB1nG5j6KiMWrUQ1HVmFXxWXWU4YkcY7VqPqtlikr5KNo2Zf0IWLumrFzAKsIcwnwZQ1M0Nv1SwNo0DcXQFE2j8RjQXL8D1BbO6c2Tlx0EY/0QBVCQI6hsykr4qLZxvjlOuPT8DeYQlvXIW8SSOctzr1OAItsvGxcsGOtcE8aagaC69nKuoxq4p68b1qGQzKe794WqbKwujC08e6BO2pjLd6098XD4x9f5vqedfquY3Ff88Jsc0C39OJSqr6oksmSorFIrFDW/wj+I3PiAStoDI5zn3o8PeSI9WMoeGkGTzaGJB0pHTzNT2T+ka+e1HAkkOgW9Fw0h1yaxRCWO0TxpSVRVWiJNOa9U6hWlBFOL6C9OLXIacR28hsyKPZ6DklTfz0BWjoMSl8wRllpT0YXefIa8KZbj+jVjtRIcVjG6lwGoxTLXbPzOwjQWOXEt66mPMFhZC2f6Oi4NtuN3KcqyE79LMXXUgf20qbkYLuHKzHVUn7WlsHE1rWYc95pW2ASbej2nNJaB1b9k4bJXHRhCzYNg5fVZ0i6OkaAPgpWh/zpHue0ZrAZwHUtAVhXoq0VgPGaBeWIXmL82gXm1Dcz3UmflNNHV2FM8dSngaq3U+Jwu2gX2JjKDsfZ7O7hkKL1hsDmwMiwgpStZ47AkRx2s3SNdhDmrTDHeDll8BsM7UJAsZZ7HajVQTiE58K4xWXQy8vZNU25ANqOyjifJZrVB0S3ZgFS4rAIqIsXumuCyGrgoasFSqyQh1mCm56YwcWXjpTBH2KJkWAbbBtaPS7gGBdkIuMBuWtq1rgM7c4ZXSHfd+l6xFX/Ja3qSyUr6EVdXupOMvIZfh01Ruweuq77D4R/W9uUnxFH1DzSduBvvCiAWGaUt9o2HuospvPFQvnKaUnj0othtuipvDZbVWNdU7soFqfrslf1qqb02GFJs4k1nNpm1+cGviu9F0uGlbPk3/x9tvUXsyfdgzExDeLvvVJUfKrz0xpwYVPiJ9/2mxvOJ3o29+2L4+509h3E0UB25N37m8qJgqVKrc2OL4rT1DzQNg4PvD7hvAAAAAElFTkSuQmCC',
  },
} as const;

export const SocialButton: React.FC<SocialButtonProps> = ({
  text,
  provider,
  iconSize = 25,
  ...rest
}) => {
  const { theme } = useTheme();

  const textDefault = useMemo(() => {
    if (text) {
      return text;
    }
    return SwitchProvidersTextMap[provider];
  }, [provider, text]);

  const uri = useMemo(() => {
    return SwitchProvidersImageMap?.[provider]?.[theme] || '';
  }, [provider, theme]);

  return (
    <Button
      fullWidth
      type="outline"
      appearance="text"
      alignItems="center"
      startContent={<Image width={iconSize} height={iconSize} source={uri} />}
      endContent={<Box width={iconSize} height={iconSize} />}
      sx={{
        text: {
          width: '100%',
          textAlign: 'center',
          alignItems: 'flex-end',
        },
      }}
      {...rest}
    >
      {textDefault}
    </Button>
  );
};